디자인 규칙 모음

쉽게 말하면

규칙 모음이 주는 건 두 가지예요. 하나는 손님이 끝까지 같은 가게에 있다고 느끼는 것이고, 다른 하나는 고치는 값이 싸지는 것이에요. 두 번째가 사실 더 커요.

이런 증상이면 규칙이 없는 거예요

코드를 못 봐도 알아볼 수 있어요. 증상은 눈에 보이거든요.

다섯 번째 줄이 진단 방법이에요. "버튼 색을 전부 진한 파랑으로 바꿔 주세요" 한 문장을 시켜 보면 알아요. 전 화면이 같이 바뀌면 규칙이 있는 거고, 한 화면만 바뀌면 없는 거예요. 확인만 하고 원래 색으로 되돌리면 돼요.

규칙은 네 칸이면 시작돼요

큰 회사의 디자인 규칙집은 수백 장이에요. 사장님 가게는 네 칸으로 충분히 시작해요.

색 말고도 규칙에 들어가는 것

규칙 모음이라고 하면 색과 글꼴만 떠올리는데, 손님이 어색함을 느끼는 지점은 보통 다른 데 있어요.

이 여섯 개는 색보다 알아채기 어려운데, 남는 어색함은 더 커요. 정리를 시킬 때 "버튼 문구·아이콘·기다리는 중 표시·빈 화면 문구도 같이 통일해 주세요"를 덧붙이면 한 번에 처리돼요.

AI에게 이렇게 말하면 돼요

사장님이 직접 고치는 일이 아니에요. 증상을 그대로 말하면 돼요. 전문 용어는 몰라도 되고, 아래 문장을 그대로 복사해서 쓰셔도 돼요.

실제로 겪는 장면

지금은 신경 쓰지 않아도 되는 때

이 문서를 읽고 당장 정리에 들어가야 하는 사장님은 많지 않아요. 정직하게 말할게요. 아래에 해당하면 지금 할 일이 아니에요.

반대로 이때부터는 미룰수록 비싸져요. 화면이 열 개를 넘었을 때 · 나 말고 다른 사람이 손대기 시작할 때 · 브랜드색이 바뀔 가능성이 있을 때 · 결제나 로그인처럼 돈과 신뢰가 걸린 화면이 생겼을 때예요. 넷 중 하나라도 걸리면 반나절 투자할 값은 해요.

만들 때가 되면, 이 순서로

1. 1지금 쓰는 걸 세어요. 새로 정하기 전에 색이 몇 종류인지 물어봐요. 보통 생각보다 많아요. 여기서 놀라는 게 정상이에요.
2. 2줄여요. 비슷한 파랑 다섯 개 중 하나만 남기고 넷을 버려요. 새로 정하는 일이 아니라 버리는 일이에요.
3. 3역할 이름을 붙여요. 색 코드가 아니라 "브랜드색·강조색·본문색"처럼요. 나중에 색이 바뀌어도 이름은 그대로 쓸 수 있어요.
4. 4부품으로 모아요. 버튼·입력칸·카드를 한 종류씩 만들고 모든 화면이 그것만 쓰게 해요.
5. 5한 번 시험해요. 브랜드색을 잠깐 빨강으로 바꿔 보고 전 화면이 같이 바뀌는지 봐요. 안 바뀌는 화면이 아직 규칙 밖에 있는 화면이에요. 확인했으면 원래 색으로 되돌려요.
6. 6목록을 남겨요. 어떤 색·크기·부품을 쓰는지 한 장으로 적어 둬요. 다음 사람에게 넘길 때 이 한 장이 제일 값나가요(인수인계).

자주 묻는 것

Q. 디자인 감각이 없는데 규칙을 정할 수 있나요?

규칙 모음은 감각이 아니라 고를 횟수를 줄이는 장치예요. 잘 고르는 게 아니라 한 번 고르고 계속 쓰는 거예요. 조합이 자신 없으면 템플릿의 조합을 그대로 가져다 쓰는 게 가장 안전하고, 그것도 규칙 모음이 있는 상태예요.

Q. AI가 만들면 알아서 통일되는 거 아니에요?

한 번에 통째로 만들 때는 대체로 맞아요. 어긋나기 시작하는 건 나중에 한 화면씩 덧붙일 때예요. 그래서 새 화면을 요청할 때 "기존 색과 버튼을 그대로 쓰세요" 한 줄을 붙이는 습관이, 나중에 하는 정리보다 훨씬 싸요.

Q. 색을 두세 가지만 쓰면 심심하지 않아요?

화려함은 색 개수가 아니라 대비와 강조에서 나와요. 강조색을 아껴 쓸수록 눌러야 할 버튼이 눈에 확 띄어요. 색을 늘리면 전부 평범해져서 오히려 밋밋해 보여요. 브랜드색을 어떻게 잡는지는 가게 이름과 색 정하기에서요.

Q. 어두운 화면(다크 모드)도 규칙에 들어가요?

네, 그리고 여기서 차이가 크게 나요. 색을 역할 이름으로 정해 뒀으면 밝은 한 벌·어두운 한 벌만 갈아 끼우면 돼요. 색 코드를 화면마다 박아 뒀으면 거의 처음부터 다시 만드는 일이 돼요. 다크 모드

Q. 글자가 흐릿하다는 말을 들었어요

연한 회색 글씨가 대표적이에요. 규칙에 "본문색은 이 색"이라고 정해 두면 화면마다 흐려지는 일이 없어요. 얼마나 진해야 하는지는 색 대비에서 봐요. 다만 접근성이 법으로 요구되는 범위는 서비스 성격과 규모에 따라 달라요. 공공성이 있거나 규모가 커진다면 소관 기관 안내나 전문가 확인을 받는 게 맞아요.

Q. 외주에 맡길 때 뭘 달라고 해야 하나요?

화면 그림만 받지 말고 색·글자 크기 목록과 부품 목록을 함께 달라고 하세요. 그게 없으면 다음에 오는 사람이 처음부터 다시 정해요. 같은 돈을 두 번 쓰는 지점이 여기예요(외주).

헷갈리기 쉬운 것

규칙 모음 = 예쁜 디자인? 아니에요. 규칙 모음은 "같게 만드는 장치"고, 예쁨은 무엇을 골랐느냐의 문제예요. 규칙이 있어도 촌스러울 수 있고, 규칙이 없어도 한 화면은 예쁠 수 있어요. 규칙이 보장하는 건 열 번째 화면도 첫 화면과 같아 보인다는 것 하나예요. 그 하나가 비싸요.

템플릿과 뭐가 달라요? 템플릿은 완성된 집이고, 규칙 모음은 그 집이 쓰는 자재 목록이에요. 템플릿으로 시작하면 자재 목록을 얻은 셈이에요. 문제는 그 집을 고치면서 다른 데서 가져온 자재를 섞을 때 생겨요.

부품과 뭐가 달라요? 부품은 버튼 하나 같은 물건이고, 규칙 모음은 그 물건들에 색·크기 기준까지 합친 창고 전체예요. 부품만 있고 색 기준이 없으면 같은 버튼이 화면마다 다른 색으로 나와요. 꾸미는 값이 어디에 적히는지는 꾸미는 규칙에서 볼 수 있어요.