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