같은 홈페이지, 디자인 스타일 12가지
지시문에서 '디자인:' 한 줄만 바꿔 넣으면 같은 가게 홈페이지가 이렇게 달라져요.
[작은숲 꽃방] 소개 홈페이지를 index.html 파일 하나로 만들어 줘. - 내용: 가게 이름, 한 줄 소개 "오늘 들어온 꽃으로만 묶어요", 가게 소개 두 줄, 꽃다발 25,000원부터, 영업 11시~20시(월요일 휴무), 카톡 문의 버튼 - 사진: photo1.jpg(가게 앞), photo2.jpg(꽃다발) - 디자인: 아래에서 고른 스타일 - 한글 글꼴은 Pretendard, 휴대폰과 컴퓨터 모두 깨지지 않게 - 코드 전체를 빠짐없이 한 번에 보여 줘
클로드나 챗GPT에 넣으면 화면이 바로 보여요. 사진 두 장은 대화에 같이 올리세요.
스타일: 벤토 그리드. 크기가 다른 둥근 상자들을 도시락처럼 맞춰서 첫 화면 안에 정보를 모두 배치
스타일: 브루탈리즘. 두꺼운 검정 테두리, 원색 배경, 일부러 투박하게 겹친 상자, 그림자 없는 각진 모양
스타일: 고급 부티크. 거의 검정에 가까운 바탕, 금색 가는 선, 넓은 글자 간격, 어둡고 극적인 사진
스타일: 자연스러운 손맛. 종이 질감 바탕, 흙빛과 올리브색, 둥근 곡선 모양, 손글씨 느낌 영어 장식 글자
스타일: 흰 바탕, 아주 넓은 여백, 검정 한 가지 색, 사진은 크게, 장식은 하나도 없이
스타일: 패션 잡지 지면처럼. 아주 큰 제목과 작은 본문의 대비, 여러 단으로 나눈 배치, 사진 아래 짧은 설명, 가는 구분선
스타일: 스위스 그래픽 디자인. 엄격한 격자, 화면을 가르는 아주 큰 굵은 글자, 빨강 한 색만 강조, 모두 왼쪽 정렬
스타일: 글래스모피즘. 흐리게 처리한 사진 배경 위에 반투명 유리 카드, 부드러운 빛 번짐
스타일: 1990년대 개인 홈페이지. 형광 색, 픽셀 느낌 테두리, 반짝이는 배지, 방문자 수 카운터, 흐르는 글자 띠
스타일: 글자가 주인공. 화면을 꽉 채우는 거대한 가게 이름, 흑백 대비, 스크롤하면 글자가 옆으로 흐르는 효과
스타일: Y2K. 크롬 질감 글자, 은색과 하늘색 그라데이션, 둥근 물방울 모양 버튼, 반짝이 장식
스타일: 그림책처럼. 사진 대신 CSS로 그린 단순한 꽃 그림, 파스텔 색, 둥근 손그림 선
2026-10-14에 AI Korea Club이 이 지시문을 그대로 넣어 실제로 만든 결과예요. 화면 디자인은 클로드(Sonnet)로 만들었어요.
