«예쁘게 해줘»라고 하면 안 나옵니다
AI에게 웹페이지를 만들라고 시켜 보면 대부분 비슷하게 나옵니다. 파란 버튼, 가운데 정렬, 흰 배경. «예쁘게»는 지시가 아니기 때문입니다.
디자인에는 이름이 붙은 스타일이 있습니다. 그 이름을 대면 AI가 정확히 알아듣습니다. 「글래스모피즘으로 해줘」 한 마디면 결과가 통째로 달라집니다.
① 아래 22가지 시안을 훑어보고 ② 마음에 드는 것의 프롬프트를 복사해서 ③ 클로드코드·코덱스·AI 스튜디오에 그대로 넣으십시오. 그게 전부입니다.
시안 이미지는 전부 AI로 만들었습니다. 각 스타일이 실제로 어떤 느낌인지 보시라고 GPT 이미지로 생성했습니다. 참고용 그림이지 특정 서비스의 화면이 아닙니다.
배치로 말한다
무엇을 어디에 놓느냐로 승부합니다. 장식이 거의 없어 오래 가고, 내용이 많은 페이지에 안전합니다.
도시락처럼 칸을 나눈 배치
크기가 다른 카드를 도시락 칸처럼 붙여 배치합니다. 기능이 여러 개인 제품 소개에 가장 효율적입니다.
이건 조심하십시오 — 칸 크기에 강약이 없으면 밋밋해집니다. 큰 칸 1~2개를 반드시 두십시오.
벤토 그리드 레이아웃의 제품 소개 페이지를 만들어 줘. - CSS Grid로 크기가 다른 카드를 빈틈없이 배치 - 큰 카드 1개(대표 기능) + 중간 2개 + 작은 카드 4~5개 - 카드마다 아이콘 + 한 줄 제목 + 짧은 설명 - 모서리 20px, 은은한 그림자, 배경은 아주 옅은 회색 - 마우스를 올리면 카드가 살짝 떠오르게 - 모바일에서는 한 줄로 쌓이게 HTML 한 파일로 만들어 줘.
격자와 여백만으로 신뢰를 준다
엄격한 그리드, 큰 여백, 헬베티카 계열 서체. 컨설팅·연구소·보고서형 페이지에 가장 안전한 선택입니다.
이건 조심하십시오 — 잘못하면 밋밋합니다. 제목 크기 대비를 크게 벌리십시오.
스위스 인터내셔널 스타일의 기업 소개 페이지를 만들어 줘. - 12칼럼 그리드를 엄격히 지키고 여백을 넉넉히 - 헬베티카 계열 산세리프, 왼쪽 정렬 - 제목은 아주 크게, 본문은 작게 — 크기 대비를 크게 - 색은 검정·흰색 + 빨강 포인트 하나만 - 얇은 가로 구분선으로 섹션을 나눔 - 장식 없이 타이포그래피와 정렬만으로 완성 HTML 한 파일로 만들어 줘.
잡지 지면을 웹으로
큰 제목, 세리프 본문, 사진과 캡션. 글을 읽히게 만들어야 하는 아티클·자료실에 적합합니다.
이건 조심하십시오 — 본문 한 줄이 너무 길어지지 않게 65자 안팎으로 잡으십시오.
잡지 에디토리얼 스타일의 아티클 페이지를 만들어 줘. - 아주 큰 세리프 제목과 부제 - 본문은 세리프, 줄간격 넉넉하게, 한 줄 65자 내외 - 첫 문단에 드롭캡 - 사진은 화면 끝까지 꽉 차게(full-bleed) + 작은 이탤릭 캡션 - 배경은 살짝 따뜻한 미색 - 인용문은 큰 글씨로 따로 배치 HTML 한 파일로 만들어 줘.
덜어내서 비싸 보이게
흰 배경, 얇은 선, 한 가지 포인트 컬러. 고급 브랜드와 포트폴리오에서 오래 통하는 방식입니다.
이건 조심하십시오 — 여백이 곧 디자인입니다. 채우고 싶은 유혹을 참으십시오.
미니멀 화이트 스타일의 포트폴리오 페이지를 만들어 줘. - 순백 배경, 장식 최소화 - 1px 얇은 구분선만 사용 - 라벨은 아주 작은 대문자에 자간을 넓게 - 큰 이미지 하나와 넉넉한 여백 - 포인트 컬러는 단 하나만 - 스크롤 시 이미지가 서서히 드러나게 HTML 한 파일로 만들어 줘.
일부러 어긋나게 배치
요소를 겹치고 어긋나게 놓아 긴장감을 만듭니다. 크리에이티브 스튜디오 사이트의 전형입니다.
이건 조심하십시오 — 읽는 순서가 흐트러지기 쉽습니다. 시선 흐름을 먼저 설계하십시오.
비대칭 브로큰 그리드의 크리에이티브 스튜디오 페이지를 만들어 줘. - 이미지 블록을 크기를 달리해 서로 겹치게 배치 - 텍스트를 예상 밖 위치에 어긋나게 - 한쪽에는 과감한 여백 - 굵은 에디토리얼 타이포그래피 - 스크롤 시 요소마다 속도를 달리해 층이 느껴지게(패럴랙스) - 모바일에서는 한 줄로 정돈되게 HTML 한 파일로 만들어 줘.
표면으로 말한다
표면의 재질감으로 인상을 만듭니다. 같은 배치라도 완전히 다른 분위기가 됩니다.
유리처럼 비치는 반투명 카드
배경이 흐릿하게 비치는 반투명 패널을 겹칩니다. 밝은 그라데이션 배경 위에서 특히 살아납니다. 대시보드·요금제·프로필 카드에 잘 맞습니다.
이건 조심하십시오 — 글자 대비가 약해지기 쉽습니다. 본문 글자는 반드시 진하게 올리십시오.
글래스모피즘 스타일의 웹 대시보드를 만들어 줘. - 반투명 유리 패널(backdrop-filter: blur)에 흰색 반투명 테두리 - 배경은 보라→파랑 그라데이션에 흐릿한 색 원(blur orb) 2~3개 - 카드 모서리 24px, 부드러운 그림자 - 카드 안에는 요약 숫자, 작은 차트, 최근 활동 목록 - 글자는 충분히 진하게 해서 배경에 묻히지 않게 - 반응형, 다크/라이트 모두 보기 좋게 HTML 한 파일로 만들어 줘.
배경에서 눌린 듯 솟은 듯
같은 색 배경 위에 밝은 그림자와 어두운 그림자를 함께 줘 버튼이 눌린 듯 보이게 합니다. 오디오 플레이어·설정 화면에 어울립니다.
이건 조심하십시오 — 대비가 약해 접근성이 떨어집니다. 중요한 버튼에는 쓰지 마십시오.
뉴모피즘 스타일의 음악 플레이어 UI를 만들어 줘. - 배경과 같은 색(#e0e5ec) 위에 요소를 배치 - 밝은 그림자(왼쪽 위)와 어두운 그림자(오른쪽 아래)를 함께 줘 솟은 느낌 - 재생/정지 버튼은 누르면 안으로 들어간 것처럼 inset 그림자로 전환 - 아이콘은 단순한 선 아이콘 - 텍스트 대비를 확보해 읽히게 HTML 한 파일로 만들어 줘.
어두운 바탕에 빛나는 포인트
짙은 남색·검정 배경에 네온 글로우를 얹습니다. 개발자 도구·AI 서비스 랜딩에서 표준처럼 쓰입니다.
이건 조심하십시오 — 네온을 3색 이상 쓰면 촌스러워집니다. 1~2색으로 제한하십시오.
다크 네온 스타일의 AI 서비스 랜딩페이지를 만들어 줘. - 배경은 거의 검정에 가까운 남색(#0B1220) - 네온 컬러는 시안과 보라 두 가지만 사용 - 주요 버튼에 빛나는 그라데이션 테두리와 글로우 - 은은한 격자선 배경 - 모노스페이스 폰트로 된 코드 스니펫 블록 포함 - 스크롤하면 요소가 부드럽게 나타나게 HTML 한 파일로 만들어 줘.
말랑한 점토 같은 3D 덩어리
부풀어 오른 파스텔 3D 도형에 부드러운 그림자. 어린이·교육·헬스케어 서비스에 친근합니다.
이건 조심하십시오 — 요소가 커서 화면을 많이 먹습니다. 정보 밀도가 낮은 페이지에 쓰십시오.
클레이모피즘 스타일의 온보딩 페이지를 만들어 줘. - 파스텔 톤의 부풀어 오른 3D 점토 느낌 도형 - 모서리를 아주 둥글게, 안쪽과 바깥쪽 그림자를 함께 - 아이콘도 같은 점토 질감으로 - 배경은 크림색 - 요소가 천천히 위아래로 떠다니는 애니메이션 HTML 한 파일로 만들어 줘.
흐르는 빛 번짐 배경
여러 색이 뭉개지며 천천히 흐르는 배경. 제품 히어로 섹션 하나만으로도 분위기를 만듭니다.
이건 조심하십시오 — 배경 위 글자는 반드시 반투명 판을 깔고 올리십시오.
오로라 그라데이션 배경의 히어로 섹션을 만들어 줘. - 청록·마젠타·인디고 색 덩어리가 뭉개지며 섞이는 메시 그라데이션 - 배경이 아주 천천히 움직이는 애니메이션(CSS 또는 canvas) - 가운데에 굵은 흰 제목과 짧은 부제 - 버튼은 반투명 유리 느낌 - 글자 뒤에는 살짝 어두운 판을 깔아 가독성 확보 HTML 한 파일로 만들어 줘.
태도로 말한다
«우리는 이런 사람들»이라고 선언하는 방식입니다. 호불호가 갈리는 대신 기억에 남습니다.
굵은 테두리와 원색, 일부러 투박하게
검은 굵은 테두리, 각진 그림자, 원색 블록을 그대로 드러냅니다. 눈에 확 띄어야 하는 이벤트·랜딩 페이지에 강합니다.
이건 조심하십시오 — 정보량이 많은 화면에는 피로합니다. 한 페이지 분량에서 멈추십시오.
뉴 브루탈리즘 스타일의 랜딩페이지를 만들어 줘. - 모든 요소에 4px 검은 실선 테두리 - 그림자는 흐림 없이 offset만 준 하드 섀도(예: 6px 6px 0 #000) - 노랑·파랑·핑크 원색 블록 사용 - 헤드라인은 아주 크고 굵은 산세리프 - 둥근 모서리 없이 각지게 - 버튼은 두꺼운 검은 테두리 + 누르면 그림자가 줄어드는 효과 HTML 한 파일로 만들어 줘.
2000년대 초 인터넷 감성
크롬 금속 질감, 별빛 반짝임, 형광 그라데이션. 젊은 층 대상 캠페인·굿즈 페이지에서 반응이 좋습니다.
이건 조심하십시오 — 브랜드 톤이 진지한 회사에는 맞지 않습니다.
Y2K 레트로 스타일의 캠페인 페이지를 만들어 줘. - 크롬 금속 질감 그라데이션 제목(은색→푸른빛) - 홀로그램 느낌의 무지개 그라데이션 배경 - 반짝이는 별 장식과 광택 있는 물방울 버튼 - 형광 라임·마젠타 포인트 컬러 - 커서를 올리면 반짝임이 퍼지는 효과 HTML 한 파일로 만들어 줘.
80년대가 상상한 미래
보라·핑크 그라데이션 하늘과 원근 격자. 게임·음악·이벤트 페이지에서 눈에 확 들어옵니다.
이건 조심하십시오 — 가독성이 나쁩니다. 본문은 별도의 어두운 영역에 두십시오.
신스웨이브(레트로 퓨처) 스타일의 이벤트 페이지를 만들어 줘. - 보라→핑크 그라데이션 하늘과 빛나는 태양 - 지평선으로 사라지는 네온 원근 격자 바닥(CSS 또는 canvas) - 크롬 질감의 80년대 로고 타이포 - 스캔라인 텍스처를 은은하게 - 본문 영역은 어두운 반투명 판 위에 올려 읽히게 HTML 한 파일로 만들어 줘.
손으로 그린 듯한 선과 글씨
삐뚤빼뚤한 테두리와 손글씨체로 친근하게. 교육·커뮤니티·워크숍 안내에 잘 맞습니다.
이건 조심하십시오 — 손글씨 폰트는 본문에 쓰지 마십시오. 제목과 강조에만.
손그림(두들) 스타일의 워크숍 안내 페이지를 만들어 줘. - 테두리는 삐뚤빼뚤한 마커 선 느낌 - 제목은 손글씨체, 본문은 읽기 좋은 산세리프 - 배경에 종이 질감 - 요소 옆에 손으로 그린 화살표와 동그라미 주석 - 크레용 같은 따뜻한 포인트 컬러 HTML 한 파일로 만들어 줘.
명령창을 그대로 웹으로
검은 배경에 모노스페이스, 깜빡이는 커서. 개발자 대상 서비스와 AI 도구 소개에 신뢰를 줍니다.
이건 조심하십시오 — 일반 사용자에게는 진입장벽이 됩니다. 대상이 분명할 때만.
터미널(명령창) 스타일의 개발자 도구 소개 페이지를 만들어 줘. - 검은 배경에 모노스페이스 폰트, 초록·호박색 텍스트 - 깜빡이는 블록 커서와 타이핑 애니메이션 - ASCII 아트 로고 - 명령어 줄에 문법 강조 색상 - CRT 스캔라인 느낌을 아주 은은하게 - 실제로 입력할 수 있는 가짜 프롬프트 한 줄 HTML 한 파일로 만들어 줘.
만져지게 한다
화면이 평면을 벗어납니다. 체류시간을 크게 늘리지만 만드는 비용과 성능 부담이 따릅니다.
스크롤하면 제품이 돌아간다
Three.js로 만든 3D 물체가 스크롤에 맞춰 회전·확대됩니다. 제품 상세 페이지에서 체류시간을 크게 늘립니다.
이건 조심하십시오 — 모바일에서 무겁습니다. 저사양에는 이미지 시퀀스로 대체하십시오.
Three.js로 스크롤에 반응하는 3D 제품 페이지를 만들어 줘. - 화면 가운데에 3D 물체(간단한 기하 도형이라도 좋음)를 띄우고 - 스크롤 내리면 물체가 회전하고 카메라가 가까워지게 - 스튜디오 조명과 부드러운 반사 - 옆에 얇은 스크롤 진행 표시 - 배경은 어둡게, 텍스트는 구간마다 바뀌게 - 모바일에서는 성능을 낮춘 대체 모드 Three.js를 CDN으로 불러와 HTML 한 파일로 만들어 줘.
마우스를 따라 입자가 흩어진다
수천 개 점이 마우스에 반응해 밀려나고 모입니다. 기술 회사 히어로 섹션의 단골입니다.
이건 조심하십시오 — 입자 수를 욕심내면 팬이 돕니다. 성능 측정을 꼭 하십시오.
마우스에 반응하는 파티클 히어로 섹션을 만들어 줘. - canvas에 작은 점 2000개 정도를 흩뿌리고 - 마우스 커서 주변의 입자는 밀려났다가 천천히 제자리로 - 가까운 입자끼리 얇은 선으로 연결 - 배경은 어둡게, 입자는 시안과 흰색 - 가운데에 짧은 제목 한 줄 - 60fps가 나오도록 입자 수를 자동 조절 HTML 한 파일로 만들어 줘.
비스듬히 내려다본 입체 도해
서비스 구조나 업무 흐름을 입체 도해로 보여 줍니다. 복잡한 시스템을 한 장으로 설명할 때 강력합니다.
이건 조심하십시오 — 그리기 비용이 큽니다. 핵심 장면 하나만 만드십시오.
아이소메트릭 일러스트 중심의 서비스 소개 페이지를 만들어 줘. - 화면 중앙에 아이소메트릭(비스듬한 입체) 구조도 - 서버·기기·사용자를 떠 있는 판 위에 배치하고 점선으로 연결 - 파스텔 톤 플랫 컬러에 또렷한 외곽선 - 각 요소 옆에 설명 라벨 - 마우스를 올리면 해당 요소가 살짝 떠오르며 설명이 나오게 HTML 한 파일로 CSS transform 으로 구현해 줘.
마우스를 따라 카드가 기울어진다
커서 위치에 따라 카드가 입체적으로 기울고 빛이 스칩니다. 가격표·멤버십 카드에 손이 갑니다.
이건 조심하십시오 — 기울기를 15도 넘기면 멀미가 납니다.
마우스를 따라 기울어지는 3D 카드 3장을 만들어 줘. - CSS perspective와 transform: rotateX/rotateY 사용 - 커서 위치에 따라 최대 12도까지만 기울게 - 카드 표면에 빛이 스치는 홀로그램 광택 효과 - 그림자도 기울기에 따라 움직이게 - 요금제 카드 3장(기본·프로·기업) 구성 HTML 한 파일로 만들어 줘.
시간으로 말한다
시간을 설계에 넣습니다. 스크롤과 전환 자체가 메시지를 나릅니다.
글자가 주인공이 되어 움직인다
거대한 글자가 스크롤에 따라 흐르고 겹칩니다. 브랜드 선언·캠페인 첫 화면에 강렬합니다.
이건 조심하십시오 — 읽기 어려우면 실패입니다. 핵심 문장은 반드시 정지 상태로 보여 주십시오.
키네틱 타이포그래피 스타일의 브랜드 페이지를 만들어 줘. - 화면 폭을 꽉 채우는 초대형 글자 - 가로로 계속 흐르는 마퀴 텍스트 띠 - 스크롤에 따라 글자가 겹치고 속도가 달라지는 효과 - 흑백 대비에 포인트 컬러 하나 - 핵심 문장 하나는 움직이지 않고 또렷하게 HTML 한 파일로 만들어 줘.
스크롤이 곧 이야기 진행
왼쪽 글이 넘어갈 때마다 오른쪽 그래픽이 바뀝니다. 데이터 기사·연구 결과 발표에 최적입니다.
이건 조심하십시오 — 구간마다 한 가지 메시지만 담으십시오.
스크롤리텔링 데이터 스토리 페이지를 만들어 줘. - 화면을 좌우로 나눠 오른쪽 그래픽은 고정(sticky) - 왼쪽 텍스트 블록이 스크롤될 때마다 오른쪽 차트가 바뀌게 - 구간은 4개, 각 구간마다 메시지 하나 - 차트는 막대·선·지도 순으로 전환 - 옆에 진행 점 표시 - IntersectionObserver 로 구간 감지 HTML 한 파일로 만들어 줘.
화면이 끊기지 않고 이어진다
목록에서 상세로 갈 때 같은 요소가 자연스럽게 커집니다. 앱처럼 매끄러운 인상을 줍니다.
이건 조심하십시오 — 전환이 0.5초를 넘으면 느리게 느껴집니다.
카드에서 상세 화면으로 매끄럽게 확장되는 전환 효과를 만들어 줘. - 목록의 카드를 누르면 그 카드가 그대로 커지며 상세 화면이 되게 - View Transition API 를 쓰고, 지원 안 되면 FLIP 기법으로 대체 - 전환 시간은 0.4초 이내, ease-out - 뒤로 가기에서도 역방향으로 자연스럽게 - 카드 6개짜리 간단한 갤러리로 시연 HTML 한 파일로 만들어 줘.
남들은 어떻게 만들었나 — 12곳
스타일 이름을 알았으면 그다음은 실물을 보는 것입니다. 아래는 앱·웹 디자인 시안을 찾을 때 실제로 쓰이는 곳들입니다. 3D와 인터랙션을 보려면 ⑥~⑨를 보십시오.
실제 서비스 화면을 통째로 모아 둔 곳 — 가장 많이 쓰입니다
iOS·안드로이드·웹의 실제 앱 화면을 화면 단위, 플로우 단위로 모아 둡니다. 「회원가입 흐름만」, 「결제 화면만」처럼 목적별로 뽑아 볼 수 있어, 만들기 전에 남들은 어떻게 풀었는지 확인하기에 가장 빠릅니다.
| 언제 쓰나 | 기능을 정하고 화면을 그리기 직전에 — 「이 기능은 보통 어떻게 생겼나」를 30분 만에 파악 |
|---|---|
| 비용 | 무료로 일부 열람, 전체는 유료. 가입 필요 |
화면이 아니라 «흐름»을 영상으로 보여 줍니다
실제 앱의 가입·결제·온보딩 과정을 처음부터 끝까지 녹화한 영상을 모읍니다. 정지된 화면만 봐서는 모르는 «전환과 순서»를 알 수 있습니다.
| 언제 쓰나 | 온보딩이나 결제처럼 여러 화면이 이어지는 흐름을 설계할 때 |
|---|---|
| 비용 | 일부 무료, 대부분 유료 |
실제로 돌아가는 웹 서비스의 화면만 모읍니다
시안이 아니라 실제 운영 중인 웹 서비스의 화면을 수집합니다. 로그인·설정·대시보드처럼 «안쪽 화면»까지 볼 수 있어, 만들기 전에 구조를 참고하기 좋습니다.
| 언제 쓰나 | 사내 도구나 관리자 화면처럼 «안쪽 화면»을 설계할 때 |
|---|---|
| 비용 | 무료 열람 (일부 유료) |
랜딩페이지만 모아 둔 갤러리
제품 소개, 교육 과정 모집처럼 «한 장으로 설득하는 페이지»가 수천 개 모여 있습니다. 업종·색상·스타일로 걸러 볼 수 있습니다.
| 언제 쓰나 | 과정 모집 페이지나 제품 소개 페이지의 구조를 잡을 때 |
|---|---|
| 비용 | 무료 |
«잘 만든 웹»만 엄선해 올립니다 (옛 Godly)
디자인 수준이 높은 웹사이트만 골라 모읍니다. 수가 적은 대신 하나하나가 참고할 만합니다. 인터랙션이 강한 사이트가 많습니다. 예전 이름은 Godly 였고 지금은 Recent 로 바뀌었습니다.
| 언제 쓰나 | 브랜드 사이트의 톤과 완성도를 높이고 싶을 때 |
|---|---|
| 비용 | 무료 |
웹 디자인의 최전선 — 3D·인터랙션이 여기에 다 있습니다
매일 「Site of the Day」를 뽑는 웹 디자인 시상 사이트입니다. WebGL·Three.js·스크롤 인터랙션을 극한까지 쓴 사례가 가장 많이 모입니다.
| 언제 쓰나 | 3D나 스크롤 인터랙션이 실제로 어디까지 가능한지 확인할 때 |
|---|---|
| 비용 | 무료 열람 |
데모를 보고 코드까지 받아 갈 수 있습니다
스크롤 효과, 이미지 전환, WebGL 실험 같은 인터랙션을 데모와 함께 튜토리얼로 풉니다. 소스가 공개돼 있어 그대로 뜯어 쓰기 좋습니다.
| 언제 쓰나 | 「이 효과 어떻게 만들지?」가 생겼을 때 — 가장 실용적 |
|---|---|
| 비용 | 무료 · 소스 공개 |
웹 3D의 교과서 — 예제가 곧 설명서입니다
Three.js 공식 예제 모음입니다. 조명, 재질, 파티클, 물리, 포스트 프로세싱까지 수백 개 데모가 있고 전부 소스를 볼 수 있습니다.
| 언제 쓰나 | 3D 요소를 직접 넣기로 했을 때 가장 먼저 열어야 할 곳 |
|---|---|
| 비용 | 무료 · 오픈소스 |
코딩 없이 3D를 만들어 웹에 바로 심습니다
브라우저에서 3D 장면을 만들고 웹에 임베드할 수 있는 도구입니다. 커뮤니티 갤러리에 남이 만든 장면이 공개돼 있어 가져다 고쳐 쓸 수 있습니다.
| 언제 쓰나 | Three.js 코드를 직접 짜기 부담스러울 때 — 교육담당자에게 가장 현실적인 3D 경로 |
|---|---|
| 비용 | 무료 요금제 있음 |
가장 오래된 시안 창고 — 아이디어 발상용
디자이너들이 작업 시안을 올리는 곳입니다. 실제로 구현된 화면이 아니라 «그림»인 경우가 많아, 그대로 따라 만들면 안 되는 것도 섞여 있습니다.
| 언제 쓰나 | 색 조합, 아이콘, 카드 구성 같은 부분 아이디어를 찾을 때 |
|---|---|
| 비용 | 무료 |
결과물이 아니라 «과정»을 볼 수 있습니다
어도비가 운영하는 포트폴리오 플랫폼입니다. 리서치부터 최종 화면까지 프로젝트 전 과정을 정리한 케이스 스터디가 많아, 설계 논리를 배우기 좋습니다.
| 언제 쓰나 | 왜 그렇게 설계했는지 근거까지 참고하고 싶을 때 |
|---|---|
| 비용 | 무료 |
버튼·카드·로더를 코드째 가져다 씁니다
커뮤니티가 만든 CSS 컴포넌트를 모아 둔 곳입니다. 마음에 드는 버튼이나 카드를 고르면 HTML·CSS가 그대로 복사됩니다.
| 언제 쓰나 | 만들던 페이지에 예쁜 버튼 하나가 급히 필요할 때 |
|---|---|
| 비용 | 무료 · 오픈 라이선스 |
고르실 때 이것만 기억하십시오
| 만드는 것 | 권하는 스타일 |
|---|---|
| 교육 과정 모집 페이지 | 벤토 그리드 · 다크 네온 · 미니멀 화이트 |
| 사내 보고·자료실 | 스위스 · 에디토리얼 — 오래 봐도 피로하지 않습니다 |
| 교육용 웹게임 | 뉴 브루탈리즘 · 클레이모피즘 — 눈에 확 들어옵니다 |
| 이벤트·캠페인 | Y2K · 신스웨이브 · 키네틱 타이포 |
| 제품·서비스 소개 | 스크롤 3D · 3D 틸트 카드 · 스크롤리텔링 |
| 워크숍 안내 | 핸드드로운 — 친근합니다 |
한 페이지에 두 가지 스타일을 섞으면 대부분 실패합니다. 하나를 고르고 끝까지 밀어붙이는 편이 언제나 낫습니다. 굳이 섞겠다면 «구조 하나 + 질감 하나»까지입니다.
접근성을 잊지 마십시오. 글래스모피즘·뉴모피즘·신스웨이브는 예쁘지만 글자 대비가 약합니다. 사내 교육자료처럼 모든 연령이 보는 페이지라면 본문만큼은 진하게 유지하십시오.
10분이면 하나 만들어 보십니다
이 순서 그대로
- 위에서 마음에 드는 스타일 하나를 고릅니다
- «복사»를 눌러 프롬프트를 가져갑니다
- 클로드코드나 AI 스튜디오에 붙여넣고, 맨 끝에 우리 내용을 덧붙입니다
예) …HTML 한 파일로 만들어 줘. 내용은 「2026 사내 AI 교육 과정 안내」로 채워 줘. - 나온 결과를 보고 «이 부분만 이렇게 바꿔 줘»로 다듬습니다
처음부터 완벽하게 나오지 않습니다. 세 번만 주고받으면 쓸 만해집니다.
라운지의 다른 자료
이 자료는 이렇게 만들었습니다
- 시안 이미지
- 22종 전부 GPT 이미지로 생성 (2026-09-17)
- 사이트 화면
- 각 사이트 메인 페이지를 직접 접속해 촬영
- 프롬프트
- 한국어로 작성 · 클로드코드 · 코덱스 · AI 스튜디오 · Gemini 캔버스에서 그대로 사용 가능
사이트 화면은 각 서비스의 것으로, 소개 목적으로 인용했습니다. 요금제와 화면은 바뀔 수 있습니다.