색과 간격을 이름으로 관리하기
브랜드 색을 바꿨는데 두 곳이 예전 색으로 남는 문제를 없애는 방법이에요. 값마다 이름을 붙여 두면, 다음부터는 이름 한 곳만 고쳐도 화면 전체가 따라 바뀌어요.
쉽게 말하면
가게 벽을 칠할 때, 페인트 통에 "우리 가게 파랑"이라고 이름을 써 붙여 두는 사장님이 있어요. 그리고 벽마다 색을 직접 칠하는 대신 "저 통 색으로"라는 쪽지를 붙여 둬요. 색을 바꾸기로 하면 통 하나만 새 색으로 채우면 되고, 쪽지가 붙은 벽은 전부 새 색이 돼요. 반대로 칠할 때마다 눈대중으로 색을 섞은 가게는, 색을 바꾸려면 벽·간판·메뉴판·명함을 하나하나 찾아다녀야 해요. 그리고 꼭 두 곳은 빠뜨려요. 화면도 똑같아요.
화면에서 그 "통"에 해당하는 게 이름 붙인 값이에요. 색만 그런 게 아니라 여백, 글자 크기, 둥근 모서리 같은 것도 다 이름을 붙일 수 있어요. 개발자들은 이걸 디자인 토큰이라고 불러요. 사장님이 그 말을 외울 필요는 없어요. "색을 이름으로 모아 주세요"라고 말하면 통해요.
색을 바꾸려면 스무 곳을 찾아다녀요. 두 곳은 반드시 빠져요.
이름 한 줄만 고치면 전부 따라 바뀌어요. 빠지는 곳이 없어요.
이 증상이 사장님 이야기인지 확인하기
정리를 안 한 화면은 아주 예측 가능한 순서로 사장님을 괴롭혀요. 아래 네 단계 중 두 번째까지 왔다면 이 문서가 사장님 이야기예요.
- 1처음 만들 때 마음에 든 파란색을 열 군데에 각각 따로 적어요. 따로 시키지 않으면 AI도 그렇게 만들어요. 그게 화면을 가장 빨리 뽑는 방식이라서요.
- 2두 달 뒤 브랜드 색을 초록으로 바꾸기로 해요. "파란색을 초록으로 바꿔 줘"라고 시켜요.
- 3여덟 군데가 바뀌고 두 군데가 남아요. 남은 두 곳은 사장님이 자주 안 보는 화면에 있어요.
- 4그 두 곳을 손님이 먼저 봐요. 손님은 "색이 왜 다르지"라고 말하지 않고, 그냥 좀 허술한 가게로 기억해요.
여기서 중요한 건, 이게 AI가 일을 못해서 생긴 문제가 아니라는 점이에요. 값이 스무 곳에 흩어져 있으면 사람이 고쳐도 두 곳은 빠져요. 문제는 실력이 아니라 구조예요. 구조를 한 번만 바꿔 두면 다음부터는 한 곳만 고치는 일이 돼요.
AI에게 그대로 말할 문장
사장님이 직접 파일을 열 필요는 없어요. 증상을 증상 그대로 말하면 돼요. 왼쪽 칸에서 내 상황을 찾아 오른쪽 문장을 그대로 쓰세요.
| 내 증상 | 이렇게 말하세요 |
|---|---|
| 브랜드 색을 바꿨는데 어떤 버튼은 예전 색이에요 | 화면에 쓰인 색을 전부 찾아서 이름 붙인 값 몇 개로 모아 주세요. 앞으로 색은 그 이름만 고치면 전체가 바뀌게 해 주세요. |
| 같은 버튼인데 화면마다 조금씩 달라요 | 버튼의 색·글자 크기·둥근 정도를 한 군데에 정해 두고, 모든 버튼이 거기서 가져다 쓰게 바꿔 주세요. |
| 여백이 화면마다 들쭉날쭉해요 | 화면 간격을 네다섯 단계로만 쓰게 정리하고, 그 단계에 이름을 붙여 주세요. 지금 어긋나 있는 곳도 같이 맞춰 주세요. |
| 글자 크기가 제각각이에요 | 글자 크기를 제목·소제목·본문·작은 글씨 네 단계로만 쓰게 정리해 주세요. |
| 브랜드 색을 이 색으로 통째로 바꾸고 싶어요 | 색 이름은 그대로 두고, 그 이름에 담긴 값만 이 색으로 바꿔 주세요. 바꾼 뒤에 예전 색이 남은 곳이 있는지 화면별로 확인해 주세요. |
| 어두운 화면(다크 모드)도 지원하고 싶어요 | 색 이름은 그대로 두고, 밝은 화면용과 어두운 화면용 값을 두 벌로 나눠 주세요. |
| 어디를 고쳐야 색이 바뀌는지 모르겠어요 | 색과 간격을 정해 둔 곳이 어디인지, 무엇을 고치면 무엇이 바뀌는지 초보자 기준으로 한 장에 정리해 주세요. |
| 이름이 뭐가 뭔지 헷갈려요 | 이름을 쓰이는 자리대로 다시 붙여 주세요. 색 이름이 아니라 "주요 버튼 색"처럼 역할 이름으로요. |
순서가 있어요
색 바꾸는 게 급해도 이름을 모으는 일을 먼저 시키세요. 급하다고 스무 곳을 그냥 바꿔 놓으면, 다음 달에도 스무 곳이에요. 한 번만 정리하면 그다음부터는 계속 한 곳이에요.
무엇에 이름을 붙이나
다 붙일 필요는 없어요. 여섯 가지만 정해 두면 화면이 정돈돼 보이고, 나중에 바꾸기도 쉬워져요.
| 무엇에 | 몇 단계면 충분한가 | 안 정하면 생기는 일 |
|---|---|---|
| 색 | 주요 색·강조 색·글자 색·연한 글자 색·배경·선, 여섯 칸 정도 | 화면마다 파랑이 조금씩 달라요. 손님은 이유를 모른 채 "싸 보인다"고 느껴요 |
| 간격(여백) | 네 단계에서 여섯 단계 | 카드 사이가 들쭉날쭉해서 색이 예뻐도 정돈돼 보이지 않아요 |
| 글자 크기 | 제목·소제목·본문·작은 글씨, 네 단계 | 같은 본문이 화면마다 크기가 달라서 읽다가 눈이 피곤해져요 |
| 둥근 모서리 | 두 단계. 버튼용과 카드용 | 버튼은 둥근데 카드는 각져서 남의 화면을 붙여 온 것처럼 보여요 |
| 선과 그림자 | 선 한 가지, 그림자 두 단계 | 그림자가 세 종류 섞이면 화면이 지저분해 보여요 |
| 움직임 속도 | 빠름·보통 두 가지 | 어떤 건 툭 튕기고 어떤 건 늘어져서 완성도가 떨어져 보여요 |
이름은 자리 이름으로
"파랑"보다 "주요 버튼 색"이 좋아요. 나중에 주요 색이 초록으로 바뀌면 "파랑"이라는 이름에 초록이 담기게 돼요. 그러면 이름을 보고도 무슨 색인지 몰라서, 정리한 게 다시 헷갈리기 시작해요.
내 값을 한 장에 적어 두세요
정리를 시키기 전에, 사장님이 쓸 값을 한 장에 적어 두면 일이 훨씬 쉬워져요. 아래처럼 일곱 줄이면 충분해요. 값은 사장님 가게 것으로 바꿔 쓰세요.
| 이름 | 내 가게 값(예시) | 쓰이는 자리 |
|---|---|---|
| 주요 색 | 진한 파랑 | 가입·결제처럼 가장 중요한 버튼 |
| 강조 색 | 주황 | 할인 표시, 남은 수량처럼 눈에 걸려야 하는 것 |
| 글자 색 | 거의 검정 | 본문 글씨 |
| 연한 글자 색 | 회색 | 날짜, 안내 문구처럼 덜 중요한 글씨 |
| 배경 | 흰색 | 화면 바닥 |
| 선 | 아주 연한 회색 | 카드 테두리, 구분선 |
| 기본 간격 | 손가락 한 마디 정도 | 카드 안쪽 여백의 기준. 나머지는 이 값의 절반과 두 배로 |
이 한 장이 있으면 시키기가 아주 쉬워져요. 표를 그대로 붙여 넣고 "이 이름과 값으로 정리해 주세요"라고 하면 끝이에요. 새 화면을 만들 때도 같은 표를 같이 붙이면, 화면이 늘어나도 처음부터 흐트러지지 않아요. 나중에 브랜드를 손볼 때는 이 표만 고치면 되니까, 사장님이 들고 있어야 할 종이는 결국 이거 한 장이에요.
지금은 신경 쓰지 않아도 되는 때
이 정리로 좋아지는 건 딱 하나예요. 다음 수정이 빨라지는 것. 다음 수정이 없는 화면이면 정리해도 돌아오는 게 없어요. 손님이 하루 열 명인 가게에서 이런 정돈에 이틀을 쓰는 건, 솔직히 말해서 시간 낭비예요.
| 내 상황 | 지금 정리할까요 | 왜 |
|---|---|---|
| 화면이 한 장뿐이에요(안내 페이지 하나) | 안 해도 돼요 | 색 쓰인 곳이 다섯 군데면, 그 다섯 군데를 직접 고치는 게 더 빨라요 |
| 브랜드 색을 아직 못 정했어요 | 미뤄요 | 다음 주에 또 바뀔 값에 이름을 붙이면 같은 일을 두 번 해요. 색이 정해진 뒤에 하세요 |
| 행사용 화면이라 한 달 뒤에 내릴 거예요 | 안 해도 돼요 | 고칠 일이 없는 화면은 정리해도 얻는 게 없어요 |
| 손님이 하루 열 명, 지금 급한 건 손님이에요 | 미뤄요 | 정돈은 오늘 매출을 움직이지 않아요. 손님 늘리는 일이 먼저예요 |
| 화면이 세 장 넘고 같은 버튼이 여러 화면에 있어요 | 하세요 | 지금이 가장 싸요. 화면이 열 장이 되면 같은 일이 세 배 걸려요 |
| 색을 한 번 바꿔 봤고 빠뜨린 곳이 나왔어요 | 하세요 | 이미 증상이 나온 거예요. 다음 번엔 더 크게 나와요 |
| 어두운 화면을 지원하려고 해요 | 하세요 | 색에 이름이 없으면 두 벌을 넣을 자리 자체가 없어요 |
| 개발자나 외주에 넘길 예정이에요 | 하세요 | 값이 흩어져 있으면 남이 파악하는 시간이 그대로 견적에 붙어요 |
표에서 "미뤄요"에 걸렸다면 그냥 미루세요. 겁을 줘서 뭔가 하게 만드는 것보다, 안 해도 된다고 말하는 게 정직해요. 나중에 필요해지면 그때 하면 되고, 그때 해도 늦지 않아요. 화면이 세 장을 넘어가는 순간이 신호예요.
정리를 시키는 순서
- 1세어 달라고 해요. "지금 화면에 쓰인 색이 몇 가지인지 세어 주세요." 사장님이 정한 두세 가지가 아니라 열 가지가 넘게 나오는 게 보통이에요. 이 숫자만 봐도 왜 색이 다 안 바뀌었는지가 설명돼요.
- 2모아 달라고 해요. "실제로 쓸 색만 남겨서 이름을 붙이고, 나머지는 그중 가까운 것으로 바꿔 주세요."
- 3이름 하나를 바꿔 보게 시켜요. "주요 색을 이 색으로 바꿔 주세요." 화면 전체가 따라 바뀌면 정리가 끝난 거예요.
- 4안 바뀐 곳을 알려줘요. 남은 곳이 있으면 그 화면 이름을 말해 주고 다시 시켜요. 화면이 많으면 한 번에 다 안 잡혀요. 이건 실패가 아니라 정상이에요.
3번이 검사예요. 값을 하나 바꿔서 전부 따라 바뀌는지 보는 것. 정리했다는 말을 그냥 믿지 말고 한 번 바꿔 보고 눈으로 확인하세요. 어차피 손님도 눈으로 봐요.
실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“색은 토큰으로 빼 놨으니까, 나중에 브랜드 바뀌면 한 줄만 고치시면 돼요.”
이제 해석돼요. 색값을 한곳에 모아 두고 화면들이 그걸 가져다 쓰게 만들었다는 뜻이에요. 잘한 거예요. 여기서 한 가지만 더 물어보세요. "어디를 고치면 되는지 알려 주세요." 그 위치를 모르면 정리가 돼 있어도 사장님은 못 써요.
장면 2 · 색을 바꾼 다음 날 들어온 문의
“가입하면 오는 안내 메일만 아직 예전 색이던데요.”
화면은 다 바뀌었는데 메일이 안 바뀐 거예요. 이름이 닿는 범위는 화면 안이에요. 손님에게 나가는 메일 본문, 이미지 파일 안에 이미 칠해진 색, 브라우저 탭에 뜨는 작은 아이콘 같은 건 따로 챙겨야 해요. 색을 바꾸기로 하면 이 목록을 미리 적어 두세요.
장면 3 · 색을 바꿔 달라고 했더니 화면이 뒤집혔다
“"파란색을 초록으로 다 바꿔 줘"라고 했더니 링크랑 오류 표시까지 초록이 됐어요.”
"파란색"이라고 시켰으니 파란색을 전부 바꾼 거예요. 잘못한 건 지시예요. 이름이 자리 이름으로 붙어 있으면 이런 사고가 안 나요. "주요 버튼 색만 초록으로 바꿔 주세요"라고 말할 수 있으니까요. 이름을 잘 붙이는 진짜 이유가 이거예요. 정확하게 시킬 수 있게 되는 것.
헷갈리기 쉬운 것
색을 예쁘게 고르는 일과 같은 건가요? 달라요. 어떤 색을 쓸지 고르는 건 가게 이름과 색 정하기 쪽 이야기예요. 이 문서는 정한 색을 어떻게 관리하나예요. 색이 예뻐도 관리가 안 되면 두 달 뒤에 무너져요.
반복되는 조각을 하나로 만드는 것과 같은 건가요? 짝이지만 층이 달라요. 재사용 조각(컴포넌트)은 버튼 같은 덩어리를 하나로 만드는 것이고, 이름 붙인 값은 그 덩어리가 쓰는 재료를 하나로 만드는 거예요. 재료를 먼저 정해 두면 덩어리 만들기가 쉬워져요. 값을 어디에 적어 두는지 감이 안 잡히면 CSS(꾸미는 규칙)를 먼저 훑어보세요.
배경과 글자의 밝기 차이는 취향 문제가 아니라 기준이 있는 항목이에요. 색을 바꾸다 보면 글씨가 배경에 묻는 일이 생기는데, 눈으로 대충 넘기지 말고 색 대비를 확인하세요. 접근성은 나라마다 기준이 있고 서비스 종류에 따라 지켜야 할 범위가 달라져요. 내 서비스가 어디까지 해당되는지는 여기서 단정하지 않을게요. 누구나 쓸 수 있게 만들기에서 확인처를 보고, 필요하면 담당 기관이나 법률 자문으로 확인하세요.
자주 묻는 것
- Q. 개발자가 "디자인 토큰"이라고 하던데 같은 건가요?
- 같은 거예요. 값에 이름을 붙여 한곳에서 관리하는 것을 그렇게 불러요. 그 말을 외우지 않아도 돼요. "색을 이름으로 모아 주세요"라고 하면 다 알아들어요.
- Q. 이름은 몇 개나 필요해요?
- 처음엔 열 개 안쪽이 좋아요. 주요 색·강조 색·글자 색·연한 글자 색·배경·선, 그리고 간격 네 단계 정도요. 부족하면 그때 늘리는 게 미리 많이 만드는 것보다 훨씬 쉬워요.
- Q. 제가 직접 파일을 열어 고쳐야 하나요?
- 아니에요. 말로 시키면 돼요. 다만 그 값이 어디 적혀 있는지는 한 번 물어봐서 알아 두세요. 눈에 보이는 것을 바로 만지고 싶으면 화면 위에서 직접 고치기도 있어요.
- Q. 색만 바꿔도 브랜드가 달라 보일까요?
- 색 한 겹만으로도 꽤 달라져요. 다만 글꼴과 간격까지 같이 정해야 "정돈됐다"는 느낌이 나요. 글꼴은 글꼴 고르기를 같이 보세요.
- Q. 이미 다 만들어 놓은 화면도 나중에 정리할 수 있나요?
- 할 수 있어요. 다만 화면이 많을수록 한 번의 요청으로 다 안 잡혀요. 화면 단위로 나눠 시키고, 하나 끝날 때마다 눈으로 확인하세요.
- Q. 간격 단계는 어떻게 정하면 돼요?
- 촘촘한 것부터 넉넉한 것까지 네다섯 단계면 충분해요. 눈금을 촘촘하게 만들면 매번 "이건 몇일까" 고민이 생겨서 오히려 안 지켜져요. 단계가 적을수록 지켜져요.
- Q. 어두운 화면을 지원하려면 이걸 먼저 해야 하나요?
- 네, 순서가 그래요. 색에 이름이 없으면 밝은 화면용과 어두운 화면용 두 벌을 넣을 자리가 없어요. 다크 모드를 하려면 이 정리가 사실상 준비 작업이에요.
- Q. 함께 일하는 사람에게는 뭐라고 설명하면 돼요?
- "색과 간격은 정해 둔 이름에서만 골라 써 주세요. 목록에 없는 값이 필요하면 저에게 먼저 말해 주세요"라고 하면 돼요. 새 값을 조용히 늘리지 않는 것이 이 방식의 유일한 규칙이에요. 규칙이 하나라서 지켜져요.
- Q. 개발자에게 넘길 때 이게 도움이 되나요?
- 많이 돼요. 값이 흩어져 있으면 넘겨받은 사람이 파악하는 데 시간을 쓰고, 그 시간은 견적에 붙어요. 넘기기 전에 챙길 것은 개발자에게 넘기기에 정리돼 있어요.
확인해 보세요
브랜드 색을 바꿨는데 버튼 세 개만 예전 색으로 남았어요. 가장 그럴듯한 이유는요?
하나 더
나중에 편한 이름은 어느 쪽일까요?
직접 해보기
스튜디오에서 색 한 곳만 고쳐 보세요
만들어 둔 화면에서 먼저 "쓰인 색을 이름으로 모아 주세요"라고 말해 보세요. 그다음 "주요 색을 이 색으로 바꿔 주세요"라고 한 번만 시켜 보세요. 두 번째 요청에서 화면 전체가 따라 바뀌면 정리가 된 거예요. 안 바뀐 곳이 보이면 그 화면 이름을 말해 주고 다시 시키면 돼요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
이름을 두 겹으로 두는 이유 · 정리가 익숙해지면 이름을 두 겹으로 두는 방식을 만나요. 한 겹은 원료 이름(진한 파랑, 연한 파랑처럼 색 자체의 이름), 다른 한 겹은 자리 이름(주요 버튼 색 = 진한 파랑)이에요. 처음에는 한 겹으로 충분해요. 두 겹이 필요해지는 순간은 두 가지예요. 어두운 화면을 지원할 때(자리 이름은 그대로 두고 원료만 갈아 끼우면 돼요), 그리고 브랜드를 통째로 갈아엎을 때. 그 순간이 오기 전에 두 겹을 만들면 관리할 이름이 두 배가 되기만 해요.
이름이 닿지 않는 곳 · 이름을 고쳐도 안 바뀌는 곳이 있어요. 이미지 파일 안에 이미 칠해져 있는 색, 손님에게 나가는 안내 메일 본문, 브라우저 탭에 뜨는 작은 아이콘, 결제사가 자기 화면으로 띄우는 결제창, 홍보용으로 예전에 찍어 둔 화면 사진. 색을 바꾸기로 했으면 이 목록을 따로 적어 두고 손으로 챙기세요. 앞의 비유가 어디서 깨지는지도 여기예요. 벽에는 "저 통 색으로"라는 쪽지를 붙일 수 있지만, 이미 인쇄해서 나간 전단지에는 쪽지를 붙일 수 없어요.
이름을 너무 많이 만들면 · 반대 방향의 실패도 있어요. 색 이름이 서른 개를 넘어가면 아무도 기억하지 못하고, 새로 만들 때 "이 중에 어느 거지" 하다가 결국 새 색을 또 적어요. 정리가 정리를 못 하는 상태예요. 혼자 하는 가게라면 색 여섯 칸, 간격 다섯 단계, 글자 네 단계 정도가 가장 오래 버텨요. 이름 수가 적으면 지켜지고, 지켜지면 관리가 되고, 관리가 되면 다음 수정이 하루가 아니라 십 분이 돼요.
이것만 기억하세요
- ·색을 바꿨는데 몇 곳이 안 바뀌는 건 실력이 아니라 구조 문제예요
- ·값마다 이름을 붙여 한곳에 모으면, 다음부터는 한 곳만 고쳐요
- ·이름은 색 이름이 아니라 쓰이는 자리 이름으로 붙여요
- ·화면 한 장뿐이거나 색이 아직 안 정해졌으면 지금은 미뤄도 돼요
- ·정리했다는 말은 믿지 말고, 값 하나 바꿔서 눈으로 확인하세요