한 폴더,
14개의 다른 스튜디오
병원과 카페가 같은 톤이면, 둘 다 어색하다. 업종마다 통째로 다르게 — 어떻게?
샘플 14개를 만들 때 가장 경계한 건 ‘골격 복제 + 리컬러’였어요. 같은 레이아웃에 색만 바꾸면, 14개가 다 ‘한 사람이 만든 템플릿’처럼 보이거든요. 그래서 규칙을 세웠습니다 — 업종마다 다른 스튜디오가 만든 것처럼. 팔레트·타이포·여백·모션까지 통째로. 단, 그 업종의 본질은 반드시 지킨다.
업종 본질(카페=식욕, 병원=신뢰, 헬스=동기…)이 다르면 디자인 언어도 달라야 한다. 아래에서 업종을 눌러 팔레트·서체·무드가 통째로 바뀌는 걸 직접 보세요.
01문제 — ‘업종만 바꾼 복제’는 다 비슷하다
업종만 갈아끼운 템플릿 복제 — 그게 함정이었어요. 같은 골격에 색만 바꾸면 14개가 ‘한 사람이 찍어낸 것’처럼 보이고, 정작 ‘그 업종답다’가 안 삽니다. 병원 사이트의 신뢰는 흰 여백과 차분한 블루에서 오고, 카페의 끌림은 따뜻한 갈색과 식욕 도는 사진에서, 헬스장은 어두운 배경에 강렬한 라임의 “오늘 시작” 에너지에서 오죠. 같은 디자인으로 셋을 만들면 — 셋 다 자기 업종의 감각을 잃습니다. 그래서 규칙은 하나였어요: 다름은 멋이 아니라 기능. 아래에서 그 ‘통째로 다르게’를 직접 만져보세요.
“같은 골격을 리컬러하지 않는다. 본질이 다르면 언어가 다르다.”
02업종을 눌러보세요
아래 한 카드가 업종에 따라 색·서체·무드까지 어떻게 달라지는지 — 직접 전환해 보세요. (실제 샘플은 레이아웃·컴포넌트까지 더 깊게 다릅니다.)
매일 직접 볶아, 오늘의 한 잔 가까이서, 차분하게 진료합니다 오늘부터 강해진다 당신의 사건을, 끝까지 당신의 가장 좋은 순간을
따뜻한 식욕 · 세리프 · 우드톤 신뢰 · 화이트 여백 · 블루/민트 동기 · 다크 · 강렬한 라임 격조 · 네이비/골드 · 세리프 에디토리얼 · 다크 · 테라코타칩을 누르면 같은 카드가 그 업종의 ‘언어’로 바뀝니다.
</>코드 엿보기 — 업종별 디자인 토큰
/* 업종 = 토큰 세트. 라디오 :checked가 팔레트·서체를 통째로 교체 */ #d-clinic:checked ~ .ds-stage{ --p1:#3f7bd6; --p2:#7fe0d0; --pfont:sans } // 신뢰 #d-gym:checked ~ .ds-stage{ --p1:#aef23f; --p2:#d6ff6b; --pfont:sans } // 동기 #d-law:checked ~ .ds-stage{ --p1:#c9a04a; --p2:#e6c36b; --pfont:serif } // 격조 .ds-card{ background:linear-gradient(150deg,var(--pink),var(--p1)); font-family:var(--pfont) }
03그래도 본질은 지킨다
다르게 만들되 제멋대로는 아니에요. 각 선택엔 그 업종 고객의 이유가 있습니다.
업종 = 본질 → 디자인
카페는 식욕 → 따뜻한 우드·풀블리드 사진 · 병원은 헛걸음 안 한다는 안심 → 진료시간·차분한 블루 · 헬스장은 동기·가격투명 → 다크·라임·가격 카드 · 법률은 신뢰 → 네이비·세리프·절제 · 동물병원은 긴급 → 따뜻함 + 응급 동선. 색은 취향이 아니라 그 업종이 전하려는 감각입니다.
그래서 규칙은 14개 샘플 전체에서 같았어요: 레이아웃·타이포·컴포넌트를 현장마다 1:1로 새로 짜되 — 접근성·GEO·정직(가짜 0)·런칭 기준은 전부 동일하게. 다름은 표면에서, 기준은 바닥에서.
04정직은 공통
디자인이 다 달라도 지키는 선은 같습니다 — 가상의 상호·인물, ‘예시’ 가격, 규제 업종 광고법(의료·변호사) 준수, AI 노출 보장 안 함. 멋보다 먼저, 오해를 만들지 않는 것.