세레인 랩 — 피부 리듬 스킨케어
제품을 고르는 순간부터 아침과 저녁의 사용 순서, 피부 기록, 상담까지 차분히 이어지는 10페이지 프리미엄 스킨케어 브랜드 스킨입니다.
CmsHom Design System
콘텐츠를 읽고, 구조를 설계하고, 인상을 완성합니다.
같은 스킨을 반복하지 않고, 업종과 콘텐츠에 맞는 정보 구조·시각 리듬·프로그램 흐름을 설계합니다.
Complete Website Samples
전체 공개 제작 샘플
이미 공개된 주문제작·프리미엄·쇼핑몰 사례입니다. 각 샘플의 모든 페이지와 실제 이동 흐름을 새 창에서 확인할 수 있습니다.
OPEN 12
스테이 결 — 숲의 두 채
공간을 고르는 첫 장면부터 두 채의 비교, 객실 상세, 계절 경험, 이용 안내, 저널, 예약 문의까지 이어지는 11페이지 프리미엄 스테이 스킨입니다.
모션그리드 — 로보틱스·스마트 제조
로봇 셀 도입을 검토하는 생산·품질·설비 담당자가 솔루션과 산업 적용, 구축 절차, 검증 항목을 이해하고 문의까지 이어갈 수 있는 11페이지 제조 기업 스킨입니다.
더휴 클리닉 — 프라이빗 메디컬·웰니스
생활의 불편을 질문으로 고르고 케어 프로그램, 첫 방문 흐름, 의료진, 공간, 저널, 예약으로 이어지는 11페이지 메디컬·웰니스 스킨입니다.
VELLUM — 프라이빗 레지던스
한 사람의 생활과 대지의 결을 함께 읽는 프라이빗 레지던스 스튜디오를 위해 주택 목록·상세, 설계 접근, 재료, 스튜디오, 저널, 상담까지 설계한 10페이지 프리미엄 스킨입니다.
LATTICE OBJECTS — ROOM MATRIX
공간 크기와 사용 장면을 먼저 측정하고 오디오·조명·전원·수납 오브젝트의 호환성과 사양을 비교하는 고관여 리빙 테크 쇼핑몰.
Design Catalogue
사이트 디자인 카탈로그
모든 페이지를 이미지와 설명으로 먼저 살펴보세요. 실제 스킨과 편집 기능은 정식 제작을 시작하면 제공됩니다.
DESIGNS 115
하루 — 동물의료센터/동물병원 (웜 골든아워 케어)
웜 허니/카멜+오프크림+소프트코랄 톤의 '골든아워 감성 케어' 동물병원 8페이지 템플릿. A1 센터 미니멀 히어로·Quicksand 라운드 휴머니스트·지그재그 진료소개·차분 신뢰 톤 — 홈/병원소개/수의진/진료안내/시설/공지/오시는길/예약·상담문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. ⭐프로그램-레디: 공지 게시판(__board__)·예약/상담 폼(__custom-form__, 디자인 보존)·홈 최근공지 루프(__loop-board__)가 매니페스트 programs[]로 선언되어 가져오기/생성 시 자동 결선된다.
MARQUEE — 아트하우스 시네마 (라이트 에디토리얼)
라이트 아이보리 에디토리얼+단일 크림슨의 영화·극장·공연(아트하우스 시네마) 8페이지 템플릿. A5 가로 스크롤 핀 히어로(상영작 릴)·DM Serif Display 드라마틱 세리프·F4 시네마틱 패럴랙스 — 홈/소개/상영·공연중/시간표/갤러리/공지/상영관/예매. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(예매)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
ORBIT — 포털·커뮤니티 허브 (라이트 플랫폼)
라이트 화이트+단일 일렉트릭 바이올렛의 포털·커뮤니티·서비스 허브 8페이지 템플릿. A10 시그널 필드 히어로+모듈 카드그리드·Plus Jakarta Sans 클린 산세·F5 앰비언트+F1 — 홈/서비스 소개/주요 기능/커뮤니티/이용 가이드/공지/요금/문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(커뮤니티·공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
CONVENE — 컨퍼런스·행사 (다크 캔버스)
다크 잉크 캔버스+단일 일렉트릭 탠저린의 컨퍼런스·행사·페스티벌 8페이지 템플릿. A4 벤토 비대칭 히어로(D-day 카운트다운)·Familjen Grotesk 볼드 오버사이즈·F2 키네틱+F3 카운트업 — 홈/행사 소개/프로그램/연사/장소/공지/티켓·등록/문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(티켓·문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
CORESTACK — SI·시스템통합 (다크 웜테크)
다크 차콜+단일 일렉트릭 옐로(블루 클리셰 탈출)의 SI·시스템통합·인프라·보안 8페이지 템플릿. A9 스택 레이어 히어로·JetBrains Mono 테크 모노·F3 라인플로우+카운트업+F5 — 홈/회사 소개/솔루션/기술·인프라/구축 사례/공지/기술 지원/문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
EMERITUS — 명문 대학·아카데미 (다크 헤리티지)
다크 헤리티지 기념비 톤의 명문 대학·대학원·아카데미 8페이지 템플릿. A6 초대형 각인 타이포 히어로(Cinzel 인스크립셔널 캡스)·니어블랙+파치먼트+딥크림슨 단일 액센트(골드 헤어라인)·F1 페이드 — 홈/연혁·비전/학사·과정/교수진/캠퍼스/공지·소식/입학안내/오시는길. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
EMBER ROASTERS — 스페셜티 로스터리 (다크)
다크 에스프레소+카퍼(웜 앰버 글로우) 스페셜티 커피·로스터리 8페이지 템플릿. A8 좌측 고정 사이드 네비 히어로·Big Shoulders 인더스트리얼 콘덴스+Space Mono 로스팅데이터·F1 페이드+F3 카운트업 — 홈/로스터리/싱글오리진/메뉴·브루잉/로스팅·공간/소식/매장·스토어/오시는길. 공통 사이드바·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형(모바일 상단바 전환). 게시판(소식)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
NOIR — 프리미엄 성형·피부·검진 클리닉 (다크 럭스)
잉크차콜 다크 럭스 톤의 프리미엄 성형·피부·안티에이징·정밀검진 클리닉 8페이지 템플릿. A8 좌측 고정 사이드바 히어로·Schibsted Grotesk 산세리프·딥틸 1차 액센트+웜골드 세컨더리(절제)·F5 앰비언트 광원 — 홈/병원 소개/의료진/시술 안내/시설/공지/오시는길/상담·예약. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(상담예약)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
EDIT. — 편집샵/디자이너 부티크 (라이트 에디토리얼)
웜 오프화이트+잉크+단일 뮤트 클레이 톤의 라이트 에디토리얼 편집샵/디자이너 부티크 8페이지 템플릿. A6 초대형 Newsreader 세리프 배너 히어로·정적 우아(F1 페이드+F6 호버, 키네틱 없음)·매거진 에디토리얼 조판 — 홈/브랜드 스토리/입점 브랜드/컬렉션/룩북/공지/매장 안내/문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
NOOR — 컨템포러리 파인다이닝 (다크 시네마틱)
잉크블랙+브라스+딥와인 톤의 다크 시네마틱 컨템포러리 파인다이닝 8페이지 템플릿. A5 가로 스크롤 핀 시그니처 코스 릴 히어로·Frank Ruhl Libre 고대비 세리프·F4 시네마틱 패럴랙스 — 홈/소개/메뉴·코스/셰프/갤러리/소식/오시는길/예약. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형(A5는 모바일 세로 스택 폴백). 게시판(소식)·폼(예약)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
DERMA LAB — 더마/스킨사이언스 (클리니컬)
클리니컬 화이트+단일 클리니컬블루+민트 톤의 엔지니어드 더마/스킨사이언스(기능성 스킨케어) 8페이지 템플릿. A9 스택 레이어 카드 히어로·Geist 클린 산세리프(명조 0)·F3 카운트업+F1 페이드·CSS 제품 목업 — 홈/브랜드·과학/스킨사이언스/제품/랩·공간/공지/오시는길/문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
보이드런 — 게임 스튜디오/e스포츠 (보이드블랙 네온)
보이드 블랙+일렉트릭 바이올렛(주)+애시드 옐로우그린(서브)의 '다크·퓨처리스틱·에너지·글리치' 게임 스튜디오 8페이지 템플릿. A5 가로스크롤 키비주얼 히어로·Chakra Petch 테크노+Pretendard·글리치·카운트업 — 홈/스튜디오소개/게임라인업/스튜디오·제작/갤러리/소식·공지/오시는길/채용·문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(reduced-motion 시 글리치 정지)·반응형. 게시판(소식)·폼(채용)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
오디세아 — 여행/투어 (오션블루 경쾌 모자이크)
오션블루 주색 + 선셋코랄 악센트 + 샌드 배경의 '경쾌·컬러풀·역동' 여행사 8페이지 템플릿. A7 모자이크 히어로(타일 호버·패럴랙스)와 Sora + Pretendard + 손글씨 저널 악센트, 카운트업으로 활기찬 인상을 준다. 홈/회사소개/투어상품/여행지/포토갤러리/예약안내/오시는길/예약문의로 구성되며, 공통 헤더·푸터는 인클루드로 분리하고 __site-head__를 둔다. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형을 갖추며, 게시판(공지)·폼(예약문의)은 정적 셸로 포함해 가져온 뒤 AI로 결선한다.
은혜의 뜰 — 교회/종교 (다크 잉크 서정 세리프)
다크 잉크 웜모노+촛불 앰버 단일 악센트의 '서정·절제·여백' 교회 8페이지 템플릿. A3 풀블리드 시네마틱 히어로·Spectral+고운바탕 세리프·라이트/다크 교차 섹션·조용한 스크롤 리빌 — 홈/교회소개/예배안내/말씀/사진/공지·주보/오시는길/새가족·문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(문의)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
VELOS — 프리미엄 모빌리티/자동차 (다크 시네마틱)
미드나이트+브러시드크롬+일렉트릭레드 톤의 시네마틱 프리미엄 자동차 8페이지 템플릿. A5 가로스크롤 모델 라인업·Rajdhani 와이드 테크 타이포·CSS 차량 라인아트·성능 카운트업·F4 시네마틱 패럴랙스 — 홈/브랜드·헤리티지/모델라인업/구매·시승·정비/갤러리/뉴스·프로모션/전시장/시승문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출·가로스크롤 네이티브 폴백)·반응형. 게시판(뉴스)·폼(시승)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
온패스 — 입시·내신 전문학원 (바이올렛 벤토 키네틱)
화이트+일렉트릭 바이올렛+옐로 톤의 발랄·트러스트 입시학원 8페이지 템플릿. A4 비대칭 벤토 히어로·Pretendard Black 볼드 지오·합격대학 마퀴·합격률 카운트업·키네틱 리빌 — 홈/학원소개/강사진/과정안내/시설/공지·설명회/오시는길/상담·등록문의. 공통 헤더·푸터 인클루드 분리, __site-head__. 리빌 하드닝(무JS·reduced-motion 시 콘텐츠 노출)·반응형. 게시판(공지)·폼(상담)은 정적 셸로 포함, 가져온 뒤 AI로 결선.
PULSE 피트니스/웰니스
다크와 에너지 오렌지의 역동적인 피트니스 디자인. PT·헬스·웰니스에 최적. 8페이지 멀티페이지 템플릿 — 홈 / 브랜드 / 코치진 / 프로그램 / 갤러리 / 공지·이벤트 / 오시는길 / 체험 신청. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Archivo/Oswald 디스플레이 + Pretendard 본문, 히어로 마퀴·카운트업·갤러리 필터·전 페이지 스크롤 리빌(JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지·이벤트)과 폼(체험 신청)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
도담 유아/키즈
파스텔 멀티컬러의 밝고 친근한 유아 디자인. 어린이집·유치원·키즈·놀이교육에 최적. 홈 / 원 소개 / 선생님 / 프로그램 / 갤러리 / 공지·알림장 / 오시는길 / 입학 상담 8페이지 멀티페이지 템플릿. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Pretendard + Jua/Gaegu/Baloo 2 폰트, 라운드 카드·pill 내비·스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지·알림장)과 폼(입학 상담)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
VAULT 핀테크/금융
사이드 고정 히어로 패널과 딥그린·민트의 프리미엄 핀테크 디자인. 자산관리·금융·스타트업에 최적. 홈(A8 좌측 고정 히어로 셸) / 회사소개 / 경영진 / 상품·서비스 / 리포트 / 공지·공시 / 오시는길 / 상담신청 8페이지 멀티페이지 템플릿. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Space Grotesk + Pretendard, 전 페이지 스크롤 리빌(JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지·공시)과 폼(상담신청)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
AURA — 뷰티/에스테틱 멀티페이지 (파스텔 럭셔리)
블러시/골드 파스텔 럭셔리 명조 뷰티/에스테틱 8페이지 멀티페이지 템플릿. 홈 / 브랜드소개 / 프로그램 / 갤러리 / 원장·의료진 / 공지·이벤트 / 오시는길 / 예약. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Pretendard + 나눔명조/Cormorant Garamond 폰트, 전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지·이벤트)과 폼(예약)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
AXIS — B2B 테크 기업 멀티페이지 (딥네이비)
딥네이비+일렉트릭블루 정밀 그리드 B2B 테크 기업 8페이지 멀티페이지 템플릿. 산업 지능화 솔루션 기업 콘셉트 — 홈 / 회사소개 / 솔루션 / 도입사례 / 기술 / 뉴스 / 오시는길 / 문의. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Inter + Pretendard 폰트, 스플릿 히어로·카운트업 숫자 지표·SVG 라인드로우 다이어그램·정밀 그리드 배경·전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(뉴스)과 폼(문의)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
HANWOOL — 법률/세무 멀티페이지 (클래식 격식)
버건디/골드 명조 클래식 격식 법률/세무 사무소 8페이지 멀티페이지 템플릿 — 홈 / 사무소소개 / 업무분야 / 구성원 / 상담절차 / 칼럼·소식 / 오시는길 / 상담문의. 게시판과 폼을 정적 셸로 포함하며, 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html)와 각 페이지 head의 __site-head__. Pretendard + 나눔명조/송명(Google Fonts) 폰트, 전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 가져온 뒤 AI로 실제 게시판(칼럼·소식)·폼(상담문의)을 결선합니다.
MØRK — D2C 커머스 멀티페이지 (다크 에디토리얼)
다크 잉크 배경에 라임·코랄 액센트를 얹은 에디토리얼 D2C 커머스 8페이지 멀티페이지 템플릿. 홈 / 브랜드소개 / 컬렉션 / 룩북 / 저널 / 공지 / 매장 / 문의로 구성된 패션·라이프스타일 쇼핑몰 셸입니다. Anton + Archivo + Pretendard 타이포, 벤토·비대칭 그리드, 가로 스크롤 룩북, GSAP 히어로 인트로·키네틱 마퀴·패럴랙스 모션에 리빌 하드닝(JS·GSAP 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형을 갖췄습니다. 공통 헤더·푸터를 인클루드로 분리(inc/header.html · inc/footer.html)하고 각 페이지 head에 __site-head__ 토큰을 둡니다. 공지(게시판)와 문의(폼)는 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다. 이미지는 전부 AICMS 자체 생성분(aicdn)이며, 웹폰트·모션 라이브러리만 CDN(Pretendard·Google Fonts·GSAP)을 사용합니다.
ONDA — 다이닝/카페 멀티페이지 (웜 에디토리얼)
크림/테라코타 웜 오가닉 세리프 에디토리얼 다이닝 8페이지 멀티페이지 템플릿. 홈 / 소개 / 메뉴 / 공간 / 스토리 / 소식 / 오시는길 / 예약. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Pretendard + 나눔명조(Nanum Myeongjo)·고운바탕(Gowun Batang) 폰트, 전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(소식)과 폼(예약)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
라온 — 여성 클리닉 멀티페이지 (명조 미니멀)
명조 미니멀 럭셔리 여성 클리닉 8페이지 멀티페이지 템플릿. 오프화이트+세이지 톤의 절제된 편집 디자인 — 홈 / 병원소개 / 의료진 / 진료안내 / 시설 / 공지사항 / 오시는길 / 온라인 예약. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. Pretendard + 나눔명조/송명 폰트, 전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지사항)과 폼(온라인 예약)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
블룸 아카데미 — 교육/학원 멀티페이지 (브라이트)
밝은 라이트 테마 교육/학원 8페이지 멀티페이지(홈/학원소개/강사진/과정안내/갤러리/공지사항/오시는길/수강신청·게시판과 폼 포함·리빌 하드닝·반응형). Pretendard 폰트, 블루+코랄+민트 포인트의 친근하고 신뢰감 있는 편집 디자인. 공통 헤더·푸터 인클루드 분리(inc/header.html · inc/footer.html), 각 페이지 head의 __site-head__. 전 페이지 스크롤 리빌(리빌 하드닝: JS 없거나 reduced-motion 시에도 콘텐츠 노출)·반응형. 게시판(공지사항)과 폼(수강신청)은 정적 디자인 셸로 포함되어 있으며, 가져온 뒤 AI로 실제 게시판·폼을 결선합니다.
