muji-design은(는) 무엇을 하나요?
UI를 생성하거나 개선할 때 사용하는 디자인 스킬입니다. 일본적 디자인의 기초를 무지(無印良品)의 사상에 두고, 핵심을 '최적화'로 삼습니다. 공간 문법은 일본 방(和室)의 건축에서 가져오고, 색상은 46색 팔레트를 기본으로 합니다.
핵심 ― 최적화
무지의 세 가지 관점을 UI 작업에 번역하여 사용합니다.
- 재료의 선택 ― 색상과 질감은 재료 고유의 것을 그대로 사용합니다. 생성색(生成り), 무명목(無垢の木), 다다미(畳), 돌(石), 이끼(苔), 벚꽃(桜). 색상은 이 팔레트 범위 내에서 선택합니다.
- 공정의 재검토 ― 조작 절차와 화면 전환에서 불필요한 부분을 제거합니다. 목표 조작은 적은 단계로 도달할 수 있는 위치에 둡니다.
- 포장의 간소화 ― 테두리, 배지, 장식과 같은 '포장'을 줄이고 내용물을 직접 보여줍니다.
판단 기준은 단 하나입니다. '이 화면은 무지의 선반과 화면 위에 놓았을 때 어색하지 않은가'. 망설일 때는 이 질문으로 결정합니다.
진행 방식
- 주인공을 정한다 ― 화면마다 주인공은 하나입니다(도코노마/床の間). 다른 요소는 모두 돋보이게 하는 역할을 합니다.
- 공간(間)을 확보한다 ― 먼저 아무것도 두지 않는 영역을 확보합니다. 여백은 남는 것이 아니라 처음에 두는 요소입니다.
- 뼈대를 그린다 ― 문살(桟)과 격자(格子)로 구분합니다. 구분선, 리스트 행, 내비게이션 세로선은 가늘게 하고, 색상은 나무 계열에서 가져옵니다.
- 면을 둔다 ― 구획은 문지방(敷居)과 단(段)으로 나타냅니다. 면의 색상을 한 단계만 바꿔서 구분하며, 강한 테두리선이나 강한 그림자에 의존하지 않습니다.
- 강조색을 한 점 둔다 ― 꽂꽂이(生け花)처럼 강조색과 디자인 요소는 화면당 한 곳에만, 중심에서 벗어나 배치합니다.
- 자체 점검한다 ― 아래 점검 항목을 통해 요소를 줄이는 수정을 한 번 수행한 후 제출합니다.
제1층 ― 수치(결정값)
색상
팔레트는 기본입니다. 실제 화면에서는 역할별로 이 값을 사용하고, 프로젝트에 맞게 약간 조정합니다. 조정 시 기준은 채도를 낮게 유지하고, 따뜻한 뉴트럴 범위 내에 머무르며, 명암 단계와 역할을 유지하는 것입니다.
역할 할당(기본)
| 역할 | 색상 | HEX |
|---|---|---|
| 배경 | 생성색(生成り色) | #FBFAF5 |
| 면(카드·패널) | 쇼지(障子) 흰색 | #F5F5F4 |
| 면(한 단 낮춤) | 확산광 | #E5DCD7 |
| 구획 단 | 옅은 다다미 그림자 | #D5C0B0 |
| 본문 글자 | 들보 진한 차색(梁の濃茶) | #2E1E12 |
| 보조 글자 | 리큐쥐네즈미(利休鼠) | #888E7E |
| 구분선·문살(桟) | 문살 | #9F7153 |
| 나무 요소 | 나뭇결 | #B3987E |
| 강한 면·제목대 | 들보 중간 차색(梁の中茶) | #745E4A |
팔레트 전체 46색
- 참고 이미지에서 측정: 쇼지 흰색
#F5F5F4/ 확산광#E5DCD7/ 옅은 다다미 그림자#D5C0B0/ 다다미#BEB09A/ 나뭇결#B3987E/ 문살#9F7153/ 들보 중간 차색#745E4A/ 들보 진한 차색#2E1E12 - Tatami Morning Light:
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Japanese Minimalism: 하얀 연(白練)
#F5F0E8/ 짚색(藁色)#E8DFC8/ 생성색(生成り)#EDE0C4/ 말차(抹茶)#7A8C5E/ 먹물(墨染)#6B6B6B/ 승색(勝色)#1C1F2B - 와색(和色): 생성색(生成り色)
#FBFAF5/ 연색(練色)#EDE4CD/ 백차(白茶)#DDBB99/ 호두색(胡桃色)#A86F4C/ 리큐차(利休茶)#A59564/ 리큐쥐네즈미(利休鼠)#888E7E - Misty Tatami:
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - 식물: 소나무잎색(松葉色)
#839B5C/ 이끼색(苔色)#6C8253/ 어린 대나무색(若竹色)#6B9362/ 꾀꼬리색(鶯色)#928C36/ 소나무 그림자#3D4F3C - 물·하늘·돌·흙: 물연한 파(水浅葱)
#80ABA9/ 남색(藍色)#165E83/ 자갈(砂礫)#E8E3D6/ 젖은 현무암#35393B/ 흙색(土色)#BC763C - 벚꽃: 벚꽃색(桜色)
#FEF4F4/ 엷은 벚꽃(薄桜)#FDEFF2/ 벚꽃 쥐색(桜鼠)#E9DFE5/ 회색 벚꽃(灰桜)#E8D3D1/ 패랭이꽃색(撫子色)#EEBBCB/ 홍매화색(紅梅色)#F2A0A1
색상 사용법
- 화면의 주인공은 쇼지·다다미·나무의 뉴트럴입니다. 자연색(식물·물·벚꽃)은 강조색으로 화면당 1색만, 면적은 전체의 10% 이내로 제한합니다. 벚꽃 계열은 가장 면적을 좁혀야 하는 색상입니다.
- 색상 면은 평평하게 칠합니다. 색상 간의 관계는 명암 단계로 만들고, 그라데이션은 빛의 표현이 필요한 부분에만 사용합니다.
- CSS 변수 세트는
references/design-tokens.css에 있습니다.
여백·치수
- 여백 단계: 4 / 8 / 16 / 24 / 40 / 64 (px). 요소 간 여백은 이 단계에서 선택합니다.
- 화면 가장자리 여백은 넓게 잡습니다. 콘텐츠 너비를 좁히지 않고, 간의 비율을 유지합니다.
- 요소의 높이는 낮게 맞춥니다(낮은 수평선). 행 높이와 컨트롤 높이는 화면 내에서 단계를 맞춥니다.
선·모서리·그림자
- 구분선은 1px, 색상은 문살
#9F7153계열을 엷게 사용합니다. - 둥근 모서리는 최대 4px. 둥글림은 재료 모서리의 둥글림 정도로 제한합니다.
- 음영은 면 간의 명암 차이로 만듭니다. 그림자를 넣는 경우 확산광처럼 부드럽고, 넓고, 엷게 합니다.
서체
- 제목은 명조체(
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif). - 본문과 조작계는 고딕체(
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif). - 글자 크기 단계: 12 / 13 / 15 / 17 / 22 / 28 (px). 굵은 글씨는 제목과 주인공 요소에만 사용합니다. 자간은 제목에서 약간 넓히고, 본문은 표준으로 유지합니다.
움직임
- 화면 전환은 미닫이문(引き戸)의 움직임입니다. 옆으로 미끄러지는 조용한 슬라이드를 기본으로 하며, 지속 시간은 200–300ms, 이징은 부드러운 감속(
cubic-bezier(0.22, 1, 0.36, 1))을 사용합니다. - 움직임은 상태 변화를 전달하는 부분에만 추가합니다.
제2층 ― 판단(수치로 측정할 수 없는 부분)
수치는 기초입니다. 완성도는 다음 판단에 따라 결정됩니다.
- 간(間) ― 아무것도 두지 않은 장소가 의미를 가지는지 확인합니다. 요소를 추가하기 전에 간이 무너지지 않았는지 확인합니다.
- 고요함(静けさ) ― 화면 전체가 고요한지 확인합니다. 색상의 수, 선의 수, 움직임의 수가 늘어날수록 고요함은 사라집니다.
- 재질감과 빛 ― 색상 번호의 재현에 그치지 않고, 다다미나 나뭇결의 따뜻함, 부드럽게 퍼지는 빛의 느낌까지 포함하여 재질감이라고 부릅니다. 면의 색상 선택과 명암 차이로 표현합니다.
- 뺄셈 ― 무엇을 둘 것인가보다 무엇을 두지 않을 것인가의 판단이 완성도를 결정합니다. 망설여지는 요소는 두지 않는 쪽을 선택합니다.
좋은 상태와 무너진 상태의 대비
| 관점 | 좋은 상태 | 무너진 상태 |
|---|---|---|
| 주인공 | 한눈에 주인공을 알 수 있음 | 모두 같은 강도로 나열됨 |
| 여백 | 사이에 숨 쉴 공간이 있음 | 요소가 가장자리까지 꽉 참 |
| 색상 | 뉴트럴이 지배하고 강조색이 한 점 빛남 | 여러 강조색이 경쟁함 |
| 구분 | 면의 단차로 조용히 구분됨 | 테두리와 그림자가 겹쳐 시끄러움 |
| 시선 | 위에서 아래로 막힘 없이 흐름 | 시선이 갈 곳이 여러 군데 있음 |
자체 점검(제출 전에 반드시 통과할 것)
- 주인공이 하나로 정해져 있는가?
- 빽빽한 느낌은 없는가? 가장자리까지 요소가 꽉 차 있지 않은가?
- 시선이 헤매지 않는가? 처음 보는 곳과 흐르는 방향이 정해져 있는가?
- 화면이 고요한가? 색상·선·움직임의 수를 세고, 많으면 줄인다.
- 강조색은 1색·1곳·면적 10% 이내인가?
- 판단 기준(무지의 선반과 화면 위에 놓았을 때 어색하지 않은가)에 비추어 적합한가?
점검에서 발견한 문제는 요소를 추가하는 방향이 아니라 줄이는 방향으로 수정하고, 수정을 한 번 수행한 후 제출합니다.
참조
references/design-tokens.css― 역할 색상·여백·서체·움직임의 CSS 변수assets/japanese-color-palette.png― 46색 팔레트 견본assets/cover-mincho.png― 양식의 상징 이미지(쇼지·다다미·낮은 탁자·한 점의 꽂꽂이)