죽은 화면을
다시 뛰게 하는 법
예쁜데 아무것도 눌리지 않는 사이트. 무엇이 빠졌고, 어떻게 살렸나.
홈페이지를 진단하다 한 가지를 깨달았습니다. 모든 업종엔 ‘단 하나의 핵심 행동’이 있다는 것. 쇼핑몰은 담기, 부동산은 매물 찾기, 디자이너는 작업 보기. 그런데 많은 사이트가 — 디자인은 멀쩡한데 — 정작 그 행동이 ‘그림’으로만 있었어요. ‘담기’ 버튼이 눌러도 무반응, 카테고리는 장식, 포트폴리오는 클릭 불가. 심장이 멈춘 채 예쁘기만 한 거죠.
업종마다 핵심 행동 하나를 골라 실제로 동작하는 시그니처로 살린다 — 담기→배지 카운트, 칩→필터, 클릭→케이스 모달. 아래 데모는 모두 진짜 작동하고, 코드도 함께 봅니다.
01문제 — ‘그림’이 된 핵심 행동
샘플이 예쁘기만 하고 죽어 있었어요. 보기엔 멀쩡한데 정작 손님이 해야 할 일 — 담기·필터·예약 — 이 안 움직입니다. ‘담기’를 눌러도 무반응이면 거기서 마음이 닫히죠. 그래서 14개 업종 샘플을 ‘그 업종 고객’ 입장에서 다시 열어봤더니, 공통점이 분명했습니다. 골격·디자인·정직성은 좋은데, 핵심 행동이 죽어 있다. 그러니 고치는 방향도 분명해졌죠 — 화려함을 더하는 게 아니라, 그 하나의 동작을 손에 잡히게 만드는 것. 아래 데모들이 그 ‘살리는 법’입니다.
“멈춰 있으면 디자인이 아니라 이미지일 뿐이다.”
02담기가 뛰기 시작한다
쇼핑몰의 심장은 담기예요. 눌러도 아무 일 없으면 거기서 이탈하죠. 담는 즉시 장바구니 배지가 올라가고 버튼이 ‘담김 ✓’으로 바뀌게 했습니다. (담은 건 브라우저에 저장돼 새로고침해도 유지돼요.)
담기를 눌러보세요 — 배지가 오르고 버튼이 ‘담김 ✓’으로.
</>코드 엿보기 — 담기 → 배지 + localStorage
btn.addEventListener('click', function(){
var cart = JSON.parse(localStorage.getItem('cart')||'[]');
cart.push(name); localStorage.setItem('cart', JSON.stringify(cart));
badge.textContent = cart.length; // 배지 카운트업
badge.classList.remove('pop'); void badge.offsetWidth; badge.classList.add('pop');
btn.textContent = '담김 ✓'; btn.classList.add('added');
});03칩을 누르면, 매대가 반응한다
카테고리가 그냥 아이콘이면 소용없어요. 누르는 즉시 매대가 그 분류로 추려지고, 안 맞는 건 사라지고, 결과 개수가 바뀌어야 합니다. 다시 누르면 전체로.
전체 8개
칩을 눌러 분류해 보세요.
</>코드 엿보기 — 칩 → 카드 토글
chip.addEventListener('click', function(){
var cat = chip.dataset.cat;
tiles.forEach(function(t){
t.classList.toggle('is-hidden', cat!=='all' && t.dataset.cat!==cat);
});
// 활성 칩 표시 + 결과 개수 갱신
});04클릭하면, 이야기가 열린다
디자이너의 심장은 작업물이에요. 썸네일만 있으면 “그래서 뭘 했는데?”가 안 풀리죠. 그래서 클릭하면 케이스 모달이 열려 — 큰 이미지 + 문제 → 과정 → 결과를 보여줍니다.
타일을 클릭하면 케이스가 열립니다 (Esc·바깥 클릭으로 닫기).
</>코드 엿보기 — 클릭 → 모달 채우기
tile.addEventListener('click', function(){
var c = CASES[tile.dataset.i]; // 문제/과정/결과 데이터
fill(modal, c); // 이미지·제목·태그·케이스 주입
modal.classList.add('open');
});
// 닫기: ✕ 버튼 · 바깥(backdrop) 클릭 · Esc05화려함보다 먼저, 정직함
샘플이라고 대충 하지 않았어요. 오히려 선을 지키는 게 더 신경 쓰였습니다.
지킨 원칙
① 상호·후기·가격은 전부 ‘예시’ 표기 · ② 실제 결제/장바구니 페이지처럼 없는 건 ‘실데이터 자리’로 명시 · ③ 규제 업종은 광고법 준수(의료·변호사 표현 주의) · ④ 모든 모션은 prefers-reduced-motion에서 정지. 가짜로 채우지 않고, 구조를 진짜로 동작하게 만드는 데 집중했어요.
06그리고 — 도구가 스스로 자란다
이 작업들은 사실 하나의 재사용 시스템으로 합니다. 업종 본질 카드 + 시그니처 코드 카탈로그 + 런칭 체크리스트. 그리고 샘플 하나를 살릴 때마다 그 시스템에 배운 게 쌓여요 — 카탈로그가 두꺼워지고, 체크리스트가 정교해지고. 쇼핑몰을 하며 ‘빈 섹션 숨김’을, 프리랜서를 하며 ‘접근성 좋은 모달’을 카탈로그에 더했습니다.