(오타쿠적으로) 예쁜 홈페이지 만들 때 AI 뭐 써요?

∙2026년 10월 16일∙조회 29

홈페이지 제작에 AI를 적극적으로 써본 지 약 1년 정도 된 거 같다.

처음에는 남들 쓰는만큼 ChatGPT를 쓰고, 올해 초에 Gemini가 떠오르면서 그쪽으로 한 번 갈아탔다가, 취미 차원에서 HTML을 만들 일이 자주 생기면서 오직 HTML을 예쁘게 만드는 AI 구독이 필요한 상황이 되었다. 아무리 봐도 Gemini는 엄청나게 세세한 프롬프트를 넣지 않는 이상 한계가 명확했기 때문이다.

따라서 막연하게 구글에 홈페이지 잘 만드는 AI를 검색해봤지만, 나오는 건 전부 Claude를 추천한다는 얘기 뿐이었다.

근데 내 지향점이 이게 아니라

이쪽이라면?

가독성이고 UX고 뭐고 일단 장식 많고 예뻐 보이는, 소위 '오타쿠 디자인'이라 불리는 html은 어느 AI가 더 잘 뽑아주는지 테스트해봤다.

※ AI 특성상 여러 번 수정을 거쳐야 쓸만한 디자인이 나오겠지만, 명확한 비교를 위해 수정 한 번도 안 거치고 나온 초안만 첨부한다.

1. 프롬프트 쓰기

내 경우, AI한테 html 요청을 할 때 아래와 같이 진행한다.

makefile

플랫폼 내부의 자기소개 페이지에 넣을 html이 필요해.
1.규격 및 제약
모든 스타일은 인라인 코드만 가능.
가로 : 최대 800px
2. 디자인 테마
테마 : 파스텔, y2k, 첨부한 이미지 톤앤매너 적극 활용하여 디자인 요소로 활용
컬러 : 파스텔 보라, 분홍, 하늘
3. 요청사항
AI 특유의 디자인 지양(섹션마다 border가 들어가서 지나치게 분리감을 주는 것, 단조로운 컬러 톤 및 레이아웃 구조, 불필요한 박스 남발, 질서정연한 레이아웃, 들어갈 내용에 없는 텍스트를 임의로 추가하여 장식으로 사용하는 행위)

다이어리 같은 다양한 디자인 요소 추가 희망.

clamp로 모바일 요소 사이즈도 고려하여 제작
4. 들어갈 내용
Develog
User:: 누리
@user_1777782913786
취미: 사고치고 수습하기
인 마케터
관심 주제
개인 사이트 만들기
태그
#개인사이트 #홈페이지 #그누보드 #워드프레스
최신 글
(가로형 이미지박스, 이미지 직접 첨부 가능하게, PC에서 2x2 레이아웃, 모바일에서는 세로로 한 줄로 들어가도록)
9월 22일
SNS 계정 정지 안 당하는 법 : 내가 만든다
(가로형 이미지박스, 이미지 직접 첨부 가능하게)
8월 4일
개인 사이트, 어디까지 만들어봤니? - ⑤ 워드프레스
(가로형 이미지박스, 이미지 직접 첨부 가능하게)
7월 16일
개인 사이트, 어디까지 만들어봤니? – ④ 그누보드
(가로형 이미지박스, 이미지 직접 첨부 가능하게)
6월 2일
개인 사이트, 어디까지 만들어봤니? - ③ 티스토리

1) 규격

개인 사이트에만 넣을 경우 규격 및 제약이 필요 없지만, 만약 플랫폼이나 노션 등의 페이지에 쓴다면 어디까지 쓸 수 있는지를 먼저 제안해야 한다.

2) 테마

디자인 테마의 경우, 희망하는 디자인 스타일과 주로 사용할 컬러를 지정해주는 게 좋다. 잘 모르겠다면 핀터레스트에 내가 생각하는 테마를 검색해본 후 나오는 디자인 컬러를 지정해도 괜찮다. '알아서 잘 해주겠지'라고 생각하면 해당 디자인 스타일에서 주로 쓰이는 컬러로 편향되는 경향이 있어, 아까운 대화 토큰만 날아간다.

당장 어제 있던 일이다. 딱히 생각나는 컬러가 없어서 아르누보 테마로, 컬러는 알아서 해달라고 했더니 학교 칠판같은 녹색 배경에 금색을 자꾸 넣었다. 몇 번 다시 해달라고 돌리고 나서야 깨달았는데, 아르누보 스타일은 통상적으로 녹색이 많이 들어가다 보니 컬러 지정이 없는 시점에서 뒷부분 요구사항을 무시하고 '본인이 생각하는 아르누보 스타일'을 반영한 것 같았다.

이 때, 원하는 테마와 컬러 지정만 하지 않고 실제 참고할만한 레퍼런스 이미지를 넣는 걸 추천한다. UI나 PPT 디자인이 아닌, 트위치 스트리밍 레이아웃 디자인이나 다이어리 디자인, 책 표지 등을 써도 괜찮다.

동일한 프롬프트를 사용했을 때 레퍼런스가 없는 이미지가 왼쪽, 레퍼런스를 포함한 이미지가 오른쪽이다. 기본적인 톤은 비슷하지만 디테일에서 차이를 보인다.

3) 요청사항

AI스러운 디자인을 안 하는 방법 : AI답지 않게 해달라고 하면 된다.

대체로 AI특유의 디자인을 피해달라 요청하면 알아서 반영하는 편이지만, 구체적인 예시를 들어줄 때 효과가 더 좋은 편이었다.

4) 들어갈 내용

복잡하게 마크다운 등을 넣을 필요 없이 줄글로만 넣어도 대체로 잘 이해하는 편이다.

2. 그래서, 실제로 써보면?

1) Gemini

반 년 넘게 잘 쓰다가 갈아탈 다짐을 하게 해준 Gemini이다.

'레퍼런스가 명확하면 잘 해준다'는 얘길 종종 봤지만, 개인적으로는 레퍼런스가 있어도 다른 AI보다 구현 능력이 떨어진다는 느낌을 받았다.

장점: 아무튼 다른 AI보다 무료모델에서 쓸 수 있는 양이 많으니까 만만하게 쓰기 좋다

단점: 안 예쁘고, 레퍼런스 반영도 잘 안 된다.

2) ChatGPT

Gemini에서 벗어난다 해도 다시 ChatGPT로 돌아가기는 다소 꺼려졌었는데, 막상 해보니 뭘 맡겨도 Gemini보다 낫다는 인상을 받았다.

개인적으로는 레퍼런스를 해석해서 디자인을 추가하는 능력이 뛰어난 편이라 생각했다. 다만, 불필요한 장식이나 텍스트를 추가하는 경향이 강해 만들고 나서도 수정을 좀 거쳐야 한다. 코드가 복잡해졌을 경우에는 포기하고 Claude로 들고 가서 고쳐달라 요청하기도 한다.