템플릿 72장
-
№075design · interaction-experiment
헤프트 Heft
웹에 무게를 달면? — 제목·단추·문단이 무게표를 단 콘크리트 덩어리가 되어 떨어지고 밀린다. 규칙 하나씩 바꾸는 물리 실험 다섯 칸.
Black Han Sans · IBM Plex Sans KR
Design Factory
-
№074editorial · personal-knowledge-garden
균사 Mycelia
완성된 글 대신 자라는 노트 — 밑줄을 누르면 노트 판이 오른쪽에 쌓이고 앞 판은 등뼈로 접힌다.
Space Grotesk · Pretendard
자리표시자Design Factory
-
№073editorial · personal-essay-blog
마지널리아 Marginalia
본문보다 여백이 더 바쁜 개인 에세이 블로그 5쪽 — 차가운 은회청 바탕에 굵은 고딕 제목·회차 숫자, 생각의 곁가지는 오른쪽 여백의 세리프 메모로 붙고 폰에서는 본문 사이 접힌 줄로 다시 놓인다. 계절 연재 띠·읽은 위치 선·태그 거르기, 가상 글 24편
Gothic A1
Design Factory
-
№072design · perception-lab
레티널 Retinal
지금 보는 색 중 하나는 화면에 없다 — 눌러서 시작하는 네 개의 지각 실험(보색 잔상·동시 대비·주변 시야 흐려짐·움직임 잔상)을 왼쪽 해설판과 오른쪽 셰이더 색면으로 겪는 가상 지각 연구소. 깜빡임 0, 명도 고정. 연구소·연구자·수치는 가상.
Bodoni Moda · Pretendard
자리표시자Design Factory
-
№069platform · community
놀이터
사람이 쓴 웃긴 글에 AI 에이전트들이 댓글로 노는 유머 커뮤니티 — 줄마다 작성자 딱지, 흰 바탕과 다크 두 벌, 엄지로 다 되는 실운영급 26쪽
Pretendard
Design Factory
-
№068portfolio · motion-design-studio
온셋 ONSET
A fictional motion studio whose launch showreel is the site itself — scroll is the playhead of a 15-second reel, and every move prints its easing, duration and axis values.
Instrument Sans · Pretendard
자리표시자Design Factory
-
№067design · risograph-print-studio
오버프린트 Overprint
두 색을 겹쳐 찍는 가상 리소 인쇄 공방의 아이덴티티 견본첩 — 회색 벽에 붙은 종이 위에서 두 잉크가 어긋나 겹치고, 어긋남 한 값이 사이트의 모든 판을 같이 움직인다.
Gasoek One · Pretendard
Design Factory
-
№066saas · ai-agent-approval
카운터사인 Countersign
에이전트는 제안하고, 서명은 사람이 한다 — 가상의 AI 업무 자동화 도구. 에이전트가 계획서를 올리면 사람이 서명란에 맞서명해야 실행된다. 올리브 먹 바탕에 서명된 것만 초록, 승인 카드·계획 편집·실행 스트리밍·실패와 재시도를 실제로 눌러 보는 콘솔. 가상 사이트 · 조직·금액은 가상
Sora · Pretendard
자리표시자Design Factory
-
№065editorial · ocean-science-expedition
패덤 Fathom
느린바다호 하강 일지 — 스크롤이 곧 수심이다. 수면에서 6,000 m 해구 어깨까지.
Schibsted Grotesk · Pretendard
자리표시자Design Factory
-
№064commerce · consumer-electronics
키폼 Keyform
키 하나까지 고르는 기계식 키보드 — 돌려 보고, 눌러 보고, 바로 바뀌는 구성기.
Familjen Grotesk · Pretendard
자리표시자Design Factory
-
№063saas · weather-data-api
아이소바 Isobar
Read the wind. A fictional weather API whose whole page is a live wind field — scroll plays the 72-hour forecast.
Chivo
자리표시자Design Factory
-
№062platform · photo-gallery
할라이드 Halide
흰 벽 위에 사진을 거는 가상의 온라인 사진 갤러리. 높이가 다른 사진의 가운데가 한 선에 걸리고, 라벨은 한 줄에 선다. 네 개의 전시실, 작품 20점 — 색은 사진에게 다 주고 UI 는 전시 라벨처럼 작게. 가상 사이트 · 작가·작품·전시는 가상
Epilogue · Pretendard
자리표시자Design Factory
-
№061portfolio · photography
알부멘 Albumen
사진가 넷이 한 권의 사진첩을 같이 채운다 — 가상 사진가 공동체의 포트폴리오. 액자 판지 같은 따뜻한 황토 바탕 위에 인화지가 손으로 놓인 듯 비스듬히 앉고, 네 귀퉁이를 사진 모서리 붙임쇠가 잡는다. 왼쪽 책등 레일이 작가 I–IV 를 넘긴다. 가상 사이트 · 작가·사진·전시는 가상
DM Serif Display · Newsreader
Design Factory
-
№060design · architecture-exhibition
아트리움 Atrium
Walk through light. A pavilion you cross by scrolling — five rooms, morning to noon.
Instrument Sans
자리표시자Design Factory
-
№059brand · lighting
데이라인 Dayline
스크롤이 시계다 — 00:00 밤에서 내리면 하늘·창빛·그림자·큰 시계 숫자·램프의 색온도가 하루 데이터를 따라 1분 단위로 바뀌는 가상 조명 브랜드. 제품·수치·가격은 가상.
Instrument Serif · Pretendard
자리표시자Design Factory
-
№058entertainment · animated-short-film
어니언스킨 The Long Hop
A fictional hand-drawn short whose site is the animator's light table: scroll flips the sheets, one drawing at a time, with the previous frames showing through.
Anybody · Space Grotesk
자리표시자Design Factory
-
№057event · motion-design-festival
인비트윈 INBETWEEN 2026
Everything happens between the keyframes. A fictional motion design festival whose site is one long animation timeline.
Syne · Schibsted Grotesk
Design Factory
-
№056platform · photo-archive
펠리클 Pellicle
빛이 남긴 얇은 막 — 가상의 사진 아카이브. 들어오자마자 사진이 빼곡한 메이슨리, 머리는 검색 한 줄이 전부다. 암실의 중성 회색 위에서 사진만 빛나고, 안전등 빨강은 크롭 마크와 점 하나에만. 가상 사이트 · 사진·작가·촬영 정보는 가상
Manrope · Pretendard
Design Factory
-
№055saas · journaling-app
클레이데이 Clayday
Shape your day by hand. A journal you can press your thumb into.
Fraunces · Familjen Grotesk
Design Factory
-
№054editorial · philately
천공 PERFIN
작은 종이에 남은 먼 여행 — 가상 수집가 한서림의 우표 도록. 어두운 녹갈 서랍을 열면 검은 스톡북 장의 글라신 띠에 우표 24점이 꽂혀 있고, 왼쪽 고정 레일이 도록 색인 카드가 된다. 루페로 들여다보고 뒤집어 연필 메모를 읽는다. 가상 사이트 · 나라·우표·수집가는 가상
Noto Serif KR · Pretendard
Design Factory
-
№053platform · plant-community
잎새 Ipsae
반려식물 커뮤니티 — 회녹색 틀 위 초록빛 흰 판, 화분 이름표가 달린 단정한 줄 목록 게시판
Do Hyeon · Pretendard
Design Factory
-
№052entertainment · game
드리프트랜즈 Driftlands
노을 하늘섬 비행선 어드벤처 — 가상 게임의 공식 사이트, 귀퉁이 계기판 머리와 트레일러 루프
Big Shoulders Display · Instrument Sans
Design Factory
-
№051brand · food-jelly-snack
말랑 Mallang
손으로 집고 싶은 젤리 — 스크롤하면 중력이 기울어 젤리가 쏟아지고, 누르면 찌그러졌다 돌아온다.
Dongle · Pretendard
Design Factory
-
№050brand · mobility-ebike
파라인 Farline
The city, one long line. Scroll faster and the photos stretch like a ride.
Archivo · Schibsted Grotesk
Design Factory
-
№049brand · audio-headphones
노달 Nodal
Hear the room disappear. A scroll that starts as noise and ends in silence.
Bricolage Grotesque · Instrument Sans
Design Factory
-
№048commerce · curated-objects
플린스 Plinth
One object a week. Documented like a museum, priced like a shop.
Cormorant Garamond · JetBrains Mono
Design Factory
-
№047saas · fintech
케이던스 Cadence
Your money has a rhythm — 다음 90일 잔액을 미리 그려 주는 가상의 개인 현금 흐름 앱. 흑연 벤토 격자의 모든 칸이 같은 한 줄(90일 잔액선)을 다른 배율로 잘라 보여 주고, 히어로의 점 수백 개가 숨 쉬듯 출렁인다. 숫자는 Anybody 가변 폭으로 늘었다 줄며 박자를 탄다. 가상 사이트 · 잔액·요금·이름은 가상
Anybody · Pretendard
자리표시자Design Factory
-
№046local · healthcare
뉴비얼 Nuvial
Medicine that starts before you feel it — 가상의 예방 의학 클리닉. 빛이 물을 지나는 느린 영상 창 아래로, 세로 스크롤이 1년 관리 여정(검진 → 결과 상담 → 분기 점검 셋 → 다음 해)을 가로로 넘긴다. 12칸 자 위를 베리 점 하나가 걷고 정류장마다 멈춘다. 가상 사이트 · 이름·요금·검사·의료진은 가상
Newsreader · Pretendard
Design Factory
-
№045brand · private-aviation
에어룸 Aerlume
Leave when the light is right — 가상의 프라이빗 제트 전세. 새벽 안개를 뚫고 오르는 제트 한 컷을 스크롤이 프레임 단위로 감고, 구름 위 마지막 하늘이 브랜드 이름 글자 속으로 접힌다. 밝은 하늘·잉크 블루 한 색·1px 선. 가상 사이트 · 기체·가격·인증은 가상
Syne · Manrope
Design Factory
-
№044saas · logistics
킬웨이 Keelway
Freight that moves like it's already there — 가상의 디지털 화물 포워더. 밤바다 영상이 화면 뒤에 고정되어 있고, 페이지는 그 위를 판(slab)처럼 지나가며 군데군데 '창' 으로 바다를 다시 보여 준다. 유리는 영상 위의 운송장 캡슐에만, 헤더는 화물 라벨처럼 칸을 나눈 전폭 띠. 가상 사이트 · 숫자·후기·가격은 가상
Bricolage Grotesque · Instrument Sans
Design Factory
-
№043platform · kids-picture-books
크레용 책장 Crayon Shelf
우리 아이 나이에 꼭 맞는 그림동화 책장 — 노란 색도화지에 크레파스로 그린 전면 책장, 한 장씩 넘기는 동화책
Jua · Pretendard
Design Factory
-
№042platform · personal-home
데이드리프트 Daydrift
오후의 온실 그림 한 장 위에 뜬 작은 개인 홈 창 하나 — 방문자 수·배경음악·방명록·도트 글씨, 창을 내리면 월페이퍼 (2000년대 복고 감성, 가상)
Galmuri11 · Pretendard
Design Factory
-
№041portfolio · design
메리골드 Marigold
가상의 UI/UX 디자이너 Mari Yoon 의 한 장 포트폴리오와 About 2쪽 — 회백 바탕에 굵은 세리프 인사, 오른쪽 위로 번지는 메리골드 노란 물결, 글·사진이 번갈아 놓인 프로젝트 카드 3장과 노란 파도 위 연락 양식. Figma Community 템플릿을 옮겨 지은 가상 사이트
Playfair Display · Nunito
자리표시자Design Factory · Figma 이식
-
№040portfolio · creative-studio
발로르 VALOR
Beyond The Horizon — 가상의 크리에이티브 스튜디오. 화면을 채운 고정 월페이퍼 안에 사이트가 있고, 얇은 고대비 세리프가 풍경 위에 그림처럼 얹힌다. 다섯 장면과 프로젝트 상세 한 쪽. 가상 사이트 · 이미지는 AI 로 생성한 가상 장면
Bodoni Moda · Pretendard
Design Factory
-
№039platform · food
벌마루 Beolmaru
가상 양봉원 벌마루의 꿀 목록·판매처·쓰임새·보름마다 오는 꿀 편지 18쪽 — 밀랍 흰 바탕을 1px 선 격자와 교차점 링으로 나누고, 굵은 세리프 제목과 잎·꿀 두 색 단선 일러스트만 얹었다. 가상 사이트
Hahmlet · Pretendard
Design Factory
-
№038product-detail · appliance
브리즈원 미니 — 상품 상세 페이지
사용설명서처럼 증명하는 무선 핸디 청소기 상세페이지 — 860 한 열이 곧 마켓 긴 이미지
Anybody · Pretendard
design-factory · breezeone 레인 (상품 상세 페이지 파일럿)
-
№037product-detail · food
오트나인 OATNINE
봉지 뒷면을 앞면으로 — 저당 그래놀라 3종의 한 열 상품 상세 페이지, 긴 이미지 860·780 (가상 브랜드)
Big Shoulders Display · Pretendard
Design Factory
-
№036editorial · tech-blog
hyunsu blog
AI 활용하기, 개발 기록하기 — 직접 겪은 일과 읽고 정리한 것을 매뉴얼처럼 읽는 기술 블로그 7쪽. 한 폭 928 · 다크 기본 + 흰 바탕 라이트, 홈과 글 머리의 표제란이 AI 작성·검수를 적는다. 예시 글 포함
IBM Plex Sans KR · Pretendard
승급 후보Design Factory
-
№035portfolio · developer
Hyunsu 한 쪽 이력
hyunsu.co.kr 의 같은 문구로 다시 짠 연표형 한 쪽 이력 — 8건이 하나의 척추에 꿰이고, 한 줄 행을 눌러 하나씩 펼친다
Pretendard
Design Factory
-
№034platform · devtools
에이전트포트 AgentPort
AI 에이전트 도구(MCP) 서버·클라이언트 디렉터리와 기업 정보 20쪽 — 돌 회색 캔버스 위 흰 시트, 모든 항목을 포트 번호로 부르는 대장. 가상 사이트
JetBrains Mono · Pretendard
Design Factory
-
№033commerce · sportswear
페이스원 PACEONE
매일의 페이스를 지키는 옷과 신발 — 러닝에서 시작한 스포츠 패션 브랜드의 대형 자사몰 34쪽 (가상 브랜드)
Archivo · Pretendard
Design Factory
-
№032commerce · outdoor
펠런 FELLRUN
서울 근교 다섯 산의 겹친 능선이 첫 화면의 풍경이자 코스 고르기인 아웃도어 커머스 — 퇴근하고, 산으로.
Gothic A1 · Pretendard
Design Factory
-
№031platform · community
갤허브 Gallhub
소형 갤러리 312곳의 합동 게시판 — 회청 색지에 흰 잉크로 찍은 관보처럼, 추천이 제목의 굵기가 된다
Hahmlet · Pretendard
Design Factory
-
№030commerce · appliance
하루가전 Haru Home
하루 종일 켜 둬도 조용한 작은 가전 — 숫자로 고르는 브랜드 자사몰
IBM Plex Sans KR · Pretendard
Design Factory
-
№029platform · fan-community
모닥불 Modakbul
스트리머 팬 사랑방 — 크림 장판 위 줄 목록, 닉네임 불빛과 추천 불씨로 떠드는 한국형 게시판
Dongle · Pretendard
Design Factory
-
№028portfolio · vfx-studio
애프터라이트 Afterlight
가상의 후반 작업 스튜디오 — 방문자의 스크롤이 한 컷을 원본 플레이트에서 마스터까지 8프레임으로 넘기고, 번인 타임코드가 24fps 로 따라 달린다.
Gothic A1 · Pretendard
Design Factory
-
№027platform · humor-community
짤통 Jjaltong
추천이 칸을 키우는 짤·한 줄 드립 커뮤니티(가상) — 쪽먹 바탕, 선 없는 칸새, 마젠타 추천 도장
Gasoek One · Pretendard
Design Factory
-
№026platform · ranking
차트라인 Chartline
순위 숫자를 품은 막대 다섯 개가 곧 표지 — 탄 역청 위 애시드 샤르트뢰즈의 주간 인기 순위
Sora · Pretendard
Design Factory
-
№025commerce · fashion
아틀리에 정오 Atelier Noon
순백 지면에 정오의 하늘색 판과 보도니 헤어라인 — 여성복 SS27 룩북 Zenith, 룩 I–XII · 컬렉션 · 상품
Bodoni Moda · Instrument Sans
Design Factory
-
№024commerce · furniture
폼 앤 레스트 Form & Rest
Furniture for the rooms you stay in — four limewashed walls, walked sideways.
DM Serif Display · Pretendard
Design Factory
-
№023entertainment · game
로우턴 Lowtarn
해 질 녘마다 물이 빠지는 호수를 내려가는 가상 서사 어드벤처 게임의 4페이지 — 안개 낀 청록흑 바탕에 안개색 한 가지와 초록 점 하나. 왼쪽 고정 '수심계' 레일에서 초록 점이 지금 있는 깊이를 가리키고, 안개는 그라데이션이 아니라 망점이다
Bebas Neue · Chivo
Design Factory
-
№022local · art
White Tide
A contemporary art gallery in a restored harbour shed — every work hangs on the old high-water line.
Familjen Grotesk · Instrument Sans
Design Factory
-
№021entertainment · music
펄서 PULSAR — Seven Signals
7인조 가상 아이돌의 컴백 사이트 — 흰 무대를 가로지르는 한 줄의 신호선
Unbounded · Pretendard
Design Factory
-
№020platform · community
붙임 Butim
동네 취미 친목 커뮤니티 — 직각 게시판 칸 위에 둥근 스티커, 참가하면 내 스티커가 붙는다
Jua · Pretendard
Design Factory
-
№019platform · forum
평판 Plainboard
글만 있는 게시판 — 먹빛 화면에 바탕체, 목록과 글이 나란히, 제목은 세로로 선다
Gowun Batang
Design Factory
-
№018local · cafe
스틸 컵 Still Cup
A small roastery on a quiet corner — name, open-now and today's bean in the first three lines; the menu typeset in one narrow column on jadeite.
Fraunces · Pretendard
Design Factory
-
№017brand · mobile
Cairn One
The small screen, remade — a fictional phone launch on a white bento grid where every tile is measured in phones and the device is shown at 1:1.
Outfit
Design Factory
-
№016commerce · jewelry
오린 ORIN
Recast silver, seen at ×8 — a quiet jewelry shop on a silver-white tray
Gloock · Familjen Grotesk
Design Factory
-
№015saas · fintech
아크 카드 ARC
혜택이 닿는 넓이로 고르는 카드 3종 — ARC 90 · 180 · 360. 스크롤하면 이름대로 세우고, 뒤집고, 한 바퀴 돈다.
Epilogue · Pretendard
Design Factory
-
№014brand · automotive
반타르 VANTAR
Electric grand tourer Datum — everything else is measured from here.
JetBrains Mono · Manrope
Design Factory
-
№013saas · booking
슬로틀리 Slotly
살롱·클리닉·스튜디오를 위한 예약 SaaS(가상) — HTML 로 그린 주간 캘린더가 화면 끝까지 흐르고, 페이지 전체가 08:00→19:00 하루로 읽힌다
Schibsted Grotesk · Pretendard
Design Factory
-
№012entertainment · film
The Last Tide
A fictional coastal mystery's official site — stills cut by a waterline, set in a slow serif on sea-glass.
Instrument Serif · Manrope
Design Factory
-
№011brand · beverage
버블잭 Bubblejack
Five loud sodas, one sweating can per screen — ice-cold photo cans on full-bleed flavor color, bubbles rising through the ground, and a shop where picking a flavor turns the page that color.
Big Shoulders Display · Chivo
Design Factory
-
№010platform · webtoon
툰레일 Toonrail
홈 전체가 만화 한 페이지인 요일 연재 웹툰 플랫폼(가상) — 주홍 칸새, 연필 콘티, 효과음 활자
Black Han Sans · Pretendard
Design Factory
-
№009platform · portal
모아 MOA
검색창 하나와 32px 괘선 — 빽빽한데 숨이 쉬어지는 흰 포털
IBM Plex Sans KR
Design Factory
-
№008local · restaurant
엠버 앤 테이블 Ember & Table
불로 요리하는 동네 비스트로의 4페이지 — 갈색 크라프트지 위 두 가지 잉크. 왼쪽 'Ember' 칸에서 괘선 불꽃이 늘 타고, 오른쪽 'Table' 칸으로 메뉴가 흐른다. 사진 없이
Syne · Pretendard
Design Factory
-
№004poster · music
블루 아워 쿼텟 Blue Hour Quartet
해 진 뒤 푸른 20분의 재즈 공연 한 장과 예매 한 장 — 코발트 종이에 찍힌 거대 활자, 너비 축으로 숨 쉬는 제목, 결제하면 호박색 두 번째 판이 찍히는 티켓
Archivo · Pretendard
Design Factory
-
№005portfolio · motion
고다나 Dana Koh
차가운 클레이 그레이 위에서 이름이 어니언 스킨으로 늘어나고, 작업 8편이 모션 패스를 따라 비대칭 콜라주로 흩어진다 — 영상 없이 움직임을 말하는 3D 모션 디자이너 포트폴리오
Anybody · Pretendard
Design Factory
-
№006saas · devtools
로그라인 Logline
청회색 강판 위 형광 한 줄 — 10억 줄에서 원인 한 줄을 찾는 로그 검색 SaaS 랜딩. 상세도 콜라주 히어로와 번호 매긴 목록 구성
Space Grotesk · Pretendard
Design Factory
-
№007commerce · beauty
Luma Ritual
Evening skincare drawn from what is inside it — a fictional beauty shop made without a single photograph.
Bricolage Grotesque · Pretendard
Design Factory
-
№003design · ai
Claude 자화상 Claude Self-Portrait
Claude Opus 5.5 가 스스로를 표현한 비공식 쇼케이스 — 검은 바탕 위 오로라 그라데이션, 입자로 그린 로고, 브라우저 안에서만 도는 토큰 데모
Pretendard
Claude Opus 5.5
-
№001commerce · beauty
HANUL
PDRN 스킨 피트니스 — 가상의 K-뷰티 브랜드 템플릿
Libre Caslon Text · Noto Sans KR
Claude Design
이 조건에 맞는 템플릿이 아직 없습니다.
이 갤러리에 대해
새 서비스를 만들기 전에 화면 방향부터 실제 페이지로 뽑아 보는 곳입니다. SaaS 랜딩·포트폴리오·이커머스·에디토리얼 등 12개 분야에 걸쳐 웹 디자인 템플릿 72장을 AI 와 함께 만들어 모았습니다.
템플릿 한 장은 브리프 하나에서 시작합니다. 방향 세 안과 와이어프레임, 색·서체·간격을 정한 디자인 토큰을 먼저 만들고 HTML·CSS 로 지은 뒤, 데스크톱·모바일 화면 컷으로 검수해 통과한 것만 올립니다.
모든 템플릿은 외부 서체·이미지·스크립트를 부르지 않는 정적 페이지이고, 안의 상호와 문구는 시연용 예시입니다. 카드를 누르면 실제 화면을 그대로 열어 볼 수 있습니다.