내 사이트 꾸미기, 색·글꼴·배치 세 가지로 끝내는 법
AI로 만든 사이트가 밋밋하거나 산만해 보이는 분께 맞는 글입니다. 색·글꼴·배치를 정리하고 값을 한 파일에 모아 두는 방법을 알게 됩니다.
사이트 꾸미기는 색·글꼴·배치 세 가지를 제한된 규칙 안에서 통일하는 작업입니다. 값을 한 파일에 모아 두면 나중에 톤을 바꿀 때도 한 번만 고치면 됩니다.
지금 이 사이트 화면에서 불편한 점을 구체적으로 찾아 줘. (예: 글자가 빽빽하다, 버튼이 안 보인다) 그다음 한 번에 하나씩만 고치자. 1) 색: 배경색·강조색·글자색을 몇 개로 제한 2) 글꼴: 제목용 하나, 본문용 하나 3) 간격: 요소 사이 여백을 규칙 있게 색·글꼴·간격 값은 파일 하나에 모아 두고 모든 페이지가 그걸 참조하게 해 줘.
웹사이트 꾸미기는 색·글꼴·배치를 바꿔 첫인상을 다듬는 작업입니다. 구조(뼈대)가 이미 있다는 전제 아래, 같은 정보를 어떻게 보여주느냐만 바꾸는 단계입니다.
이 글은 이미 만든 사이트가 있고, 어디부터 손대야 할지 막막한 분을 위한 글입니다.
꾸미기 전에 확인할 것
먼저 볼 것은 지금 화면이 정확히 뭐가 문제인지입니다. "예쁘지 않다"는 느낌만으로 시작하면 손대는 범위가 끝없이 늘어납니다.
저도 처음엔 "그냥 다 바꿔줘"라고 시켰다가, 결과물이 원래 의도와 멀어져서 다시 되돌린 적이 있습니다.
지금은 문제를 구체적으로 적어 둡니다. "글자가 너무 빽빽하다", "버튼이 안 보인다" 같은 식으로요. 그래야 AI에게 지시할 때도, 나중에 확인할 때도 기준이 분명해집니다.
색을 몇 개로 제한하기
배경색·강조색·글자색을 몇 개로 제한해서 정했습니다. 색을 많이 쓸수록 화면이 산만해집니다.
글꼴을 하나씩만 정하기
제목용과 본문용 글꼴을 각각 하나씩만 정했습니다. 여러 글꼴을 섞으면 통일감이 깨집니다.
배치와 간격 맞추기
요소 사이 여백을 규칙 있게 맞췄습니다. 여백이 들쭉날쭉하면 눌러야 할 버튼이 헷갈립니다.
값을 파일 하나에 모아 둡니다
색·글꼴·간격 값을 페이지마다 따로 적으면, 나중에 톤을 바꿀 때 페이지 수만큼 다시 고쳐야 합니다.
이 값들을 한 파일에 모아 두고 모든 페이지가 이 파일을 참조하게 만들면 한 번만 고쳐도 전체가 바뀝니다. 이런 파일을 흔히 '디자인 토큰'이라고 부릅니다. 색·크기 같은 디자인 값을 이름 붙여 모아 둔 파일이라는 뜻입니다.
저희도 브랜드 사이트를 이 방식으로 만들고 있습니다. 토큰 파일 하나를 바꾸는 것만으로 전체 화면 톤을 바꿔 볼 수 있어서, 시안을 여러 개 비교할 때 특히 편합니다.
적용 전후 비교하는 법
바꾸고 나서는 꼭 바꾸기 전 화면과 나란히 놓고 비교합니다. 눈으로만 보면 바뀐 걸 바로 잊어버리기 쉽습니다.
저는 전후 화면을 캡처해서 나란히 두고, 어떤 게 더 나은지 다른 사람에게도 물어봅니다.
자주 하는 실수
"예쁘지 않다"는 느낌만으로 "그냥 다 바꿔줘"라고 시켰더니, 결과물이 원래 의도와 멀어져서 다시 되돌렸습니다. 문제를 구체적으로 적고 시작해야 범위가 늘어나지 않습니다.
색·글꼴·배치를 한꺼번에 바꾸면 뭐가 좋아졌는지 뭐가 나빠졌는지 구분이 안 됩니다. 한 번에 색만, 그다음에 글꼴만 바꾸는 식으로 나눠서 진행하세요.
자주 묻는 질문
디자인을 몰라도 꾸밀 수 있나요?
색과 글꼴 개수를 제한하는 것만으로도 절반은 해결됩니다. 정교한 미감보다 "일관성"이 먼저입니다.
한 번에 몇 개까지 바꿔야 하나요?
저는 한 번에 색만, 그다음에 글꼴만 바꾸는 식으로 나눠서 진행합니다. 한꺼번에 다 바꾸면 뭐가 좋아졌는지 뭐가 나빠졌는지 구분이 안 됩니다.
다음 단계는 뭔가요?
방문자 수를 확인하는 기능을 붙이는 것이 다음 편입니다. 꾸미기가 끝난 뒤에 붙이는 게 순서상 자연스럽습니다.
정리
꾸미기는 색·글꼴·배치, 이 세 가지를 제한된 규칙 안에서 통일하는 작업입니다. 값을 한 곳에 모아 두면 나중에 다시 꾸밀 때도 훨씬 편합니다.
공식 자료
- 운영자가 직접 작업하며 정리한 내용입니다.