디자인 시스템이 무엇인가
“색·글꼴·모서리·여백을 그때그때 정하지 않고 미리 정해서 값으로 적어 두는 것”입니다. 그래야 화면이 늘어나도 서로 어긋나지 않습니다.
색
바탕 · 글 · 흐린 글 · 선 · 카드 · 대표색 · 강조색. 일곱 가지를 정하면 나머지는 거기서 나옵니다.
서체
제목 크기 계단, 굵기, 자간, 줄 간격. 업종에 따라 크게도 작게도 갑니다.
모양
모서리 둥글기(0·4·6·20·22), 테두리 두께, 그림자 유무, 안쪽 여백.
리듬
구역 사이 간격과 요소 사이 간격. 촘촘하게 갈지 넉넉하게 갈지.
버튼
둥근 것 · 알약 · 각진 것 · 밑줄만. 업종 분위기를 가장 빨리 바꿉니다.
첫 화면
여섯 가지 중 하나. 업종에서 손님이 제일 먼저 봐야 하는 것에 맞춰 고릅니다.
열두 벌
견본마다 한 벌씩입니다. 눌러서 열어 보세요.
| 견본 | 첫 화면 | 모서리 | 버튼 | 대표색 |
|---|---|---|---|---|
| 온재독서실독서실 · 스터디카페 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #2C3B5A |
| 세움수학학원학원 · 교습소 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #B8402A |
| 한들정형외과병원 · 의원 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #1D6070 |
| 바름공방공방 · 원데이 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #6B3352 |
| 여백 필라테스필라테스 · 헬스 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #2B2B33 |
| 영일카센터리뉴얼 전 · 후 | 사진 전면 + 어둡게 덮기 | 12px | 둥근 버튼 | #1F4E3D |
| 라온헤어미용실 · 헤어샵 | 사진 위에 카드 겹침 | 22px | 알약 버튼 | #B0543C |
| 목요일의 부엌음식점 · 다이닝 | 사진 전면 + 어둡게 덮기 | 0 | 각진 버튼 | #33452F |
| 여섯번째집인테리어 · 시공 | 좌 사진 · 우 글 반반 | 4px | 각진 버튼 | #17181A |
| 한낮스튜디오사진관 · 스튜디오 | 가운데 초대형 제목 | 0 | 밑줄 버튼 | #111111 |
| 바른숲세무회계세무 · 회계 | 좌 글 · 우 현황판 | 6px | 둥근 버튼 | #1B3A5C |
| 다솜동물병원동물병원 | 브랜드 색면 + 큰 숫자 | 20px | 알약 버튼 | #2F7D57 |
첫 화면 여섯 가지
업종에서 손님이 제일 먼저 봐야 하는 것에 맞춰 고릅니다.
사진 전면 + 어둡게 덮기
사진을 화면 전체에 깔고 어둡게 덮은 뒤 흰 글씨를 얹습니다
좌 글 · 우 현황판
왼쪽은 글, 오른쪽은 지금 상태를 보여주는 카드
가운데 초대형 제목
가운데 정렬. 아주 큰 제목 하나와 얇은 정보 줄
브랜드 색면 + 큰 숫자
브랜드 색을 화면에 깔고 큰 숫자 세 개
사진 위에 카드 겹침
사진 위로 카드가 걸쳐 올라옵니다
좌 사진 · 우 글 반반
왼쪽 사진, 오른쪽 글. 반반으로 가릅니다
구역 문법 열한 가지
그 아래를 어떤 모양으로 쌓을지. 업종마다 쓰는 것이 다릅니다 — 세무는 표가 많고, 인테리어는 사진이 많습니다.
왜 이렇게 하나
어긋나지 않습니다
화면이 스무 장이 되어도 버튼 모서리가 제각각이 되지 않습니다. 값이 한 곳에 있기 때문입니다.
빠릅니다
정해진 것이 많을수록 AI 에이전트가 짤 수 있는 부분이 늘어납니다. 그래서 4일 만에 나옵니다.
고치기 쉽습니다
“모서리를 좀 더 둥글게” 하시면 값 하나만 바꿉니다. 화면마다 찾아다니지 않습니다.
그래도 똑같지 않습니다
정해둔 것은 재료지 결과가 아닙니다. 업종과 손님을 보고 고르는 일은 사람이 합니다.