말로 설명하지 않고,
만들어 두었습니다.홈페이지 · 앱 · 커머스 · 관리자 화면 81종 — 업종과 스타일별로 직접 지어 둔 것입니다.

D(순검정)의 밝은 형제이자 본제작 후보. 구조는 그대로 두고 지면만 뒤집었다. 색을 반전한 게 아니라, 밝은 지면에서 절제가 "덜 만든 것"으로 안 보이게 어두운 앵커 3개(사진 밴드·근거 구간·푸터)를 세웠다. 유닛색 4개는 길찾기로만, 브랜드 와인은 포커스 링과 근거 숫자에만 쓴다. 그라디언트 0 · 라운드 0은 그대로.

다크 공방 톤. 히어로에서 커서를 따라 실제 시안이 흩뿌려지고, 두 트랙은 스포트라이트 전후 비교로 보여준다. 우와 최대치.

밝은 기업 홈페이지 골격. 우와는 히어로 스포트라이트 그리드 하나에만 몰아주고, 나머지는 표·매트릭스로 정연하게. 글을 많이 얹어도 안 무너진다.

다크 히어로(3D 타일 월) → 밝은 본문이 덮으며 올라옴. 중간에 스크롤로 단어가 갈리는 제작범위 구간, 두 줄 역방향 마퀴, 벤토 갤러리까지. 이미지 41장 투입.

순검정 · 그라디언트 0 · 라운드 0 · 음수 자간 0. 색은 장식이 아니라 길찾기다 — 유닛 4개에 각각 색(황토·녹청·인디고·자수정)을 주어 탭 밑줄과 번호로만 쓴다. 시네마틱 히어로 → 고정 탭바(스크롤 스파이) → 네 유닛(짓다·이어받다·자동화하다·발견되다) 카드 인덱스. 지주형 기업 사이트 실측 기반.

가변 폰트 굵기가 물결처럼 흐른다. 커서에 가까운 글자일수록 굵어지고, 커서가 없으면 자동으로 웨이브가 흐른다.

글자 한 자가 화면을 채우는 활자 견본 편집. 제작 범위 6종을 한 글자씩 세우고 클릭하면 설명이 펼쳐진다.

한글 세로쓰기(종서) 4장을 오른쪽에서 왼쪽으로 넘긴다. 본문은 가로쓰기로 복귀 — 그 대비가 시그니처다.

어두운 에스프레소 + 따뜻한 황동 조명. 은은하고 고급스러운 장인 분위기. 고대비 세리프.

제도지 위 빨강 연필 + 모노스페이스 주석 + 설계 그리드. 정밀하고 투명한 과정 강조.

옻칠 그린 주역 + 컬러블록 + 초대형 이중언어 세리프 타이포. 대담하고 자신감 있는 편집.

니어블랙 + 일렉트릭 인디고. 히어로 타이포가 스스로 조립되는 현대·테크 포워드.

풀페이지 스크롤 스냅 5장. 챕터마다 배경·강조색이 통째로 바뀌고 우측 도트 인덱스가 현재 위치를 짚는다.

초대형 국문 글자를 뚫고 이미지가 비친다. 스크롤하면 글자가 확대되며 마스크가 열려 화면 전체로 전환.

스크롤에 따라 SVG 선이 그려지며 듣기→설계→짓기→넘기기→다듬기를 잇는다. 마지막엔 선이 서명이 된다.

작업물이 z축으로 다가와 화면을 통과한다. 터널을 빠져나오면 밝은 정적 구간으로 착지.

화면 고정 상태에서 스크롤하면 "만듭니다" 앞의 큰 단어만 웹→앱→AI→서버로 교체. 색까지 변함.

왼쪽 비주얼 고정, 스크롤하면 오른쪽 텍스트와 이미지가 한 장면씩 크로스페이드로 전환.

세로로 스크롤하면 작업 갤러리가 가로로 흘러갑니다. 핀 고정 + 진행바. 모바일 세로 전환.

커스텀 링 커서가 속도에 따라 늘어나고, 모든 요소가 커서로 자석처럼 끌려옵니다.

캔버스 파티클 네트워크가 커서를 밀어내고, 섹션마다 구·격자·궤도·파동으로 재편성.

스크롤하면 카드가 카드 위로 물리적으로 쌓이고, 마지막엔 부채처럼 펼쳐집니다.

공항 안내판처럼 글자가 기계적으로 플립되며 제자리를 찾습니다. 숫자 카운터도 플랩식.

SVG goo 필터로 블롭들이 액체 메탈처럼 스며들어 하나가 됩니다. 커서를 따라와 히어로·버튼과 합쳐집니다.

서비스 → 날짜 → 시간 → 확인 4단계 예약. 캘린더를 바닐라로 직접 그렸고 키보드 화살표로 날짜 이동이 된다. 병원·미용·F&B·학원이 공통으로 쓰는 화면. 가상 브랜드 데모.

로그인 · 회원가입 · 비밀번호 재설정 · 온보딩 3단계. 비밀번호 강도 표시, 약관 전체/개별 동기화, 그리고 오류를 입력 도중에 빨갛게 만들지 않는 검증 타이밍.

접근성 컨트롤(글자 크기·고대비·모션·밑줄·커서)을 켜면 오른쪽 예시가 실제로 바뀐다. 대비비 계산기, 스킵 링크, 포커스 트랩, 나쁜 예/좋은 예 대조. 공공·기관 제안에 필요한 화면.

좌 편집 폼 / 우 실시간 미리보기. 문구·이미지·색·섹션 순서를 바꾸면 즉시 반영된다. 편집 가능 영역(EDIT)과 개발 영역(DEV)의 경계를 배지로 보여준다.

관성이 붙는 드래그 캐러셀. 놓으면 감속하며 미끄러지고 속도에 비례해 카드가 기운다. 휠·키보드도 지원.

커서가 돋보기가 되어 그 아래를 확대한다. "디테일까지 봅니다"를 말이 아니라 동작으로 보여준다.

한 파일 안 가짜 라우팅 4뷰. 커튼이 덮었다 걷히며 전환되고 해시·뒤로가기까지 동작. 강제 종료 안전장치 4중.

스켈레톤·프로그레시브 이미지·낙관적 UI·빈 목록·오류 재시도·저장 상태 6종 카탈로그. 각 카드 "다시 보기"로 재생.

질문 24개를 실시간 검색·하이라이트하고 카테고리로 좁힌다. FAQPage JSON-LD 원문을 화면에서 펼쳐 보여준다.

작업 목록에 커서를 올리면 그 프로젝트 화면이 커서를 따라 흩뿌려집니다. 외주 포트폴리오 킬러 패턴.

커서가 요소마다 원형·알약으로 변하며 "사례 보기·메일 쓰기" 라벨을 띄웁니다. 터치는 배지로 폴백.

커서 위치에 따라 카드가 3D로 기울고 스페큘러 광택이 따라 흐릅니다. 네이비 + 황동 럭셔리 톤.

커서가 지나간 자리만 "리뉴얼 후" 화면이 드러납니다. 전후 비교를 설명 없이 보여주는 방식.

링크 글자가 한 칸씩 굴러 올라가고, 제목은 뒤섞였다 제자리를 찾습니다. 전면 오버레이 메뉴 포함.

자석 버튼·보더 드로잉·밑줄 3종·모프·토글·카운트업·리플·복사 상태·플로팅 라벨 9종을 직접 만져보는 카탈로그.

카운터가 100까지 오르고 막이 걷히면 히어로가 순서대로 조립됩니다. "다시 보기" 버튼 포함.

초대형 텍스트와 작업 카드가 양방향으로 흐릅니다. 올리면 멈추고, 스크롤 속도에 따라 가속.

네 단계로 고르면 개략 범위가 실시간 계산되고 메일 초안까지 만들어집니다. 전환 목적 시안.

제출 버튼을 누른 뒤 화면이 무엇을 해야 하는가. 낙관적 전환·인라인 로딩·단계 연출·접수번호 4패턴을 네트워크 지연/DB 실패로 바꿔가며 직접 눌러 비교. 타임라인 로그로 화면 뒤 동작이 그대로 보인다.

블로그 글 상세. 고정 목차 + 읽기 진행 막대, 맨 위 핵심 요약 박스(AI가 가장 먼저 집어가는 자리), h2 밑 첫 문단이 답으로 끝나는 AEO 조판. Article JSON-LD를 화면에서 펼쳐 보여준다.

블로그 목록. 피처드 1건 + 카테고리 필터 + 실시간 검색(결과 수 aria-live) + 더 보기. Blog·ItemList JSON-LD 삽입.

외부 지도 API 없이 SVG로 약도를 직접 그렸다. 목록↔핀 양방향 하이라이트, 지금 영업중 여부를 실제 시각으로 판정, LocalBusiness JSON-LD를 지점마다 삽입하고 화면에서 펼쳐 보여준다. GEO 판매 포인트.

로그인 뒤에서 실제로 일이 돌아가는 화면. 사이드바 5뷰 전환 · 정렬되는 주문 표 · 일괄 작업 · 인라인 SVG 차트 · 다크/라이트 토글. 가상 브랜드 데모.

다단 조판 + 드롭캡 + 방주 + 각주. 실측 숫자 4개를 전부 각주로 걸어 본문과 상호 링크했다. 긴 글 구조의 시연.

세로 패널 6개 중 하나만 넓게 펼쳐진다. 키보드 좌우 이동 지원, 모바일에서는 세로 아코디언으로 전환.

좌측 고정 목차 + 스크롤 스파이 + 진행 막대. FAQ 8문항 JSON-LD 실삽입 — SEO/AEO에 유리한 긴 문서 구조 자체가 시연물.

패키지 4구성 비교표. 상단 토글로 새로 짓기 ↔ 이어받아 고치기를 바꾸면 8개 행과 가격 범위가 실제로 재렌더링된다.

문제→진단→만든 것→결과→이후 운영. 좌측 sticky 메타 패널 + 전후 비교 + 지표 카드. 가상 브랜드 데모.

세로 연혁 타임라인. 스크롤하면 진행선이 차오르고, 전체/새로 짓기/이어받기 필터로 두 트랙을 시간축에서 본다.

뷰포트를 채우는 비대칭 벤토 그리드. 서비스·숫자·코드·CTA가 각기 다른 타일로 공존.

12컬럼 그리드를 의도적으로 어긋냄. 텍스트·이미지가 그리드를 넘나들고 가이드 선이 노출.

화면을 반으로 나눈 좌우 패널이 각자 독립 스크롤. 두 흐름이 시각적 대위를 이룹니다.

잡지 목차형 히어로. 좌측 고정 번호 인덱스가 스크롤 위치를 실시간 하이라이트.

본문은 담백하게 절제, 뷰포트 1.5배의 압도적 푸터가 두 번째 히어로로 폭발.

제작 완료 시 함께 넘기는 디자인 시스템 문서. 색 대비는 WCAG 상대휘도 공식으로 브라우저에서 직접 계산해 AA 배지를 표시하고, 버튼·입력창 등 7개 컴포넌트를 상태별로 복사할 수 있게 했다.

명령을 입력하면 응답이 출력되는 CLI 미학. 제작 범위는 ls 출력처럼, 두 트랙은 git 로그처럼 조판했다.

두툼한 라운드 + 이중 그림자. 버튼이 눌리면 실제로 들어가는 촉감. 밝고 친근하되 유치하지 않게.

canvas로 사진을 문자·디더 점으로 치환하고, 커서를 올린 자리만 원본으로 복원된다. "가까이서 보면 진짜입니다".

선과 회색 블록, 치수선과 요소 이름표만으로 짠 화면이 스크롤·토글에 따라 완성 화면으로 채색된다.

굵은 검정 테두리 + 하드 오프셋 그림자 + 충돌하는 원색. 시끄럽고 당당한 네오브루탈리즘.

초대형 라이트 이탤릭 세리프 + 광활한 여백 + 단 하나의 듀오톤 사진. 럭셔리 미니멀.

리소 인쇄 오정합 — 헤드라인이 두 잉크색으로 어긋나 겹침 + 그레인·찢긴 종이 질감.

리퀴드 크롬 메타볼 + 그라디언트 크롬 텍스트 + 색수차 그림자. 반짝이는 복고미래.

서서히 흐르는 오로라 그라디언트 메시 위에 떠 있는 반투명 프로스트 글라스 패널.

404·500·점검 중·권한 없음·오프라인을 토글로 전환하며 비교한다. 일러스트는 전부 CSS/SVG로 직접 그렸고(이미지 0장), 404엔 실시간 검색, 점검 중엔 실제로 흐르는 카운트다운을 넣었다.

폰 목업이 이미지가 아니라 CSS로 그린 기기 프레임이고, 그 안의 앱 화면도 살아 있는 DOM이다. 하단 탭을 눌러도, 스크롤로도 화면이 넘어간다. 가상 브랜드 데모.

필터로 목록이 실제로 줄고, 상품을 누르면 상세 패널이 옆에서 열리고, 장바구니 합계가 실시간 계산된다. 전자상거래 법정 표시 자리까지. 가상 브랜드 데모.

commerce-brand(플레인랩)의 장바구니 다음 화면. 주문서·우편번호 검색 모달·쿠폰 10%+적립금 실시간 계산·결제수단 3종 전환·주문 완료·배송 단계 타임라인까지 실제로 계산되고 넘어간다.

국내 병원 6곳 실측값으로 조판한 병원 데모. 진료과 그리드·의료진·예약 3스텝·비급여 고지·법정 표시까지. CTA만 pill, 상시 상담은 우하단 세로 스택.

제조사 실측 6곳 기반. 제품×적용산업 2축 메가메뉴 · 실동작 스펙표(좌측정렬·tabular-nums 미사용) · 게이트 없는 자료실 · 도면 첨부 RFQ 9필드. pill 버튼 0개.

법무·세무 6곳 실측 기반. Noto Serif KR 헤딩 + 행간 1.9 · 업무분야 인덱스 · 처분 결과 배지 서술형 사례(별점·승소율 0) · 면책공고 6단락 · 광고책임변호사 푸터 표기.

채용 5곳 실측 기반 미니멀 다크형. 필터 없는 부서 그룹핑 목록 · 원칙 9개 넘버링 · 사진 0장 · JobPosting JSON-LD를 실제 삽입하고 화면에서 토글로 열어 보여준다(시장 4/5가 안 쓰는 스키마).

실시간 데이터 대시보드 목업(카운트업·라인차트·보안 배지)으로 신뢰를 시각 증명. 데모.

매거진 에디토리얼 그리드 + 셰이드 스와치 셀렉터(클릭 시 전체 컬러 전환). 데모.

대형 건축 매소너리 + 리스트·지도 반반 뷰(핀↔카드 동시 하이라이트). 데모.

다크 애니메이션 그라디언트 메시 + 타이핑되는 라이브 에이전트 데모 콘솔. 데모.

초대형 디스플레이 타이포 + 날짜 탭 타임그리드 스케줄 + 실시간 카운트다운. 데모.