Underdrawings, drawn.밑그림이 그린 여덟 장

CASES — 08
2026

전부 직접 기획하고 코드로 그린 실제 구동 화면입니다.
템플릿·빌더 없이, 브랜드마다 다른 문법으로.

네퍼 아날로그 신시사이저 홈페이지 첫 화면 — 3분할 발광 패널과 부팅 인트로
CASE 01 / 08

NEPER

네퍼 · 아날로그 신시사이저 (가상 브랜드)

'손에 답하는 악기'라는 컨셉을 GSAP 인터랙션 최대치로 구현한 영문 제품 런치 사이트입니다. 로드되면 장비가 켜지듯 3분할 패널이 순차 점등하고, 스크롤을 내리면 필터·시퀀서·파형이 캔버스로 살아 움직입니다.

왜 이렇게 그렸나 — 악기는 스펙보다 '만지는 감각'이 먼저입니다. 사이트 자체가 신디사이저처럼 부팅되고 반응하게 만들어, 제품 경험을 화면에서 미리 시켰습니다.
부팅 인트로 · 핀 서사 3막 · 캔버스 파형 · DSEG 카운터 · 영문 · AEO 세팅
온도 서촌 한옥 스테이 홈페이지 첫 화면 — 한옥 지붕 히어로와 데워지는 색온도
CASE 02 / 08

ONDO

온도 · 서촌 부티크 한옥 스테이 (가상 브랜드)

크림 에디토리얼 톤으로 서촌의 부티크 한옥 스테이를 영문 사이트에 담았습니다. 페이지를 열면 사진이 차가운 톤에서 따뜻한 톤으로 데워지고, 스크롤을 내릴수록 화면 전체의 색온도가 서서히 올라갑니다.

왜 이렇게 그렸나 — 브랜드명 '온도'를 말로 설명하지 않고, 사이트가 실제로 데워지는 것으로 증명했습니다. 이름이 곧 인터랙션입니다.
쿨→웜 색온도 인트로 · 스크롤 온도 인터랙션 · 라인 지도 · 영문 · AEO(FAQ) 세팅
심지 조명 브랜드 홈페이지 첫 화면 — 실시간 3D 펜던트 조명
CASE 03 / 08

SIMJI

심지 · 조명 브랜드

어둠 속에서 조명이 하나씩 켜지는 순간을 실시간 3D로 구현했습니다. 스크롤을 내리면 카메라가 제품 앞까지 다가가고, 제품은 360°로 돌려볼 수 있습니다.

왜 이렇게 그렸나 — 조명 브랜드의 상품은 '빛 그 자체'입니다. 사진 대신 빛이 켜지는 순간을 팔도록, 첫 화면을 점등 장면으로 설계했습니다.
실시간 3D (three.js) · 점등 인터랙션 · 360° 제품 뷰어
커퓨 남성 스트릿웨어 홈페이지 첫 화면 — 야간 거리 히어로와 통금 시계
CASE 04 / 08

CURFEW

커퓨 · 남성 스트릿웨어 브랜드

'밤 10시 이후'라는 통금 세계관을 사이트 전체에 입혔습니다. 22시부터 06시 사이에 접속하면 사이트가 스스로 야간 모드로 바뀌고, 룩북에서는 커서가 손전등이 되어 어둠을 비춥니다.

왜 이렇게 그렸나 — 스트릿웨어는 옷보다 세계관을 삽니다. 시계·야간 모드·손전등까지, 사이트가 통금이라는 세계관의 일부가 되게 했습니다.
야간 모드 자동 전환 · 손전등 커서 룩북 · 드랍 커머스 UI (4페이지)
에이텀 인테리어 리모델링 홈페이지 첫 화면
CASE 05 / 08

ATÉ

에이텀 · 아파트 리모델링 프리미엄

다크 톤과 정제된 타이포로 '실사급 3D 설계'라는 프리미엄 신뢰를 시각화했습니다.

왜 이렇게 그렸나 — 리모델링 고객의 불안은 '완공이 상상과 다를까'입니다. 계약 전에 완공을 보여준다는 강점이 첫 화면에서 바로 읽히게 했습니다.
프리미엄 다크 UI · 시공사례 갤러리 · 상담 동선
달무늬 고양이카페 홈페이지 첫 화면
CASE 06 / 08

Dalmuni

달무늬 고양이카페 · 카페 브랜드 사이트

고양이의 시간이 먼저인 공간. 감성 사진과 부드러운 모션으로 '조용한 오후'를 첫 화면에 담았습니다.

감성 브랜딩 · 스크롤 인터랙션 · 반응형
멍톤 대형견 펫카페 홈페이지 첫 화면
CASE 07 / 08

MUNGTONE

멍톤 · 대형견 펫카페

밝고 활기찬 컬러와 인터랙션으로 '뛰어놀 준비 됐나요?'라는 에너지를 전면에 세웠습니다.

활기찬 컬러 · 마이크로 인터랙션 · 예약 유도
액시엄 산업용 로보틱스 홈페이지 첫 화면 — 다크 용접 히어로와 라임 액센트
CASE 08 / 08

AXIOM

액시엄 · 산업용 로보틱스 (B2B)

'조명 없이 24시간 돌아가는 무인 공장'이라는 컨셉을 다크 산업 톤과 라임 단일 액센트로 시각화했습니다. 스크롤에 반응하는 가로 슬라이드와 0에서 실적까지 올라가는 카운터로 규모감을 전달합니다.

왜 이렇게 그렸나 — B2B 구매자는 화려함이 아니라 '규모와 통제력'을 봅니다. 산업 장비의 질감과 숫자로 신뢰를 쌓는 문법을 골랐습니다.
가로 스크롤 핀 · 숫자 카운터 · 크로스헤어 그리드 · AEO 세팅

Your turn.다음 케이스는 당신의 브랜드입니다

업종과 목표를 들려주시면,
어떤 문법이 맞을지부터 무료로 봐드립니다.

* 버튼을 누르면 카카오톡 채널 상담으로 연결됩니다.