ChatGPT, Claude, Midjourney, Gemini로 포트폴리오 웹사이트 요구사항부터 이미지 출력까지 해결하는 실전 프로세스

디자인 스튜디오 포트폴리오 웹사이트를 만들 때 가장 막히는 건 대개 코드가 아니라 “도대체 어떤 스타일로, 어떤 페이지를 써야 하지?”입니다. 저는 요구사항, 카피, 비주얼, 구현까지 한 번에 관통하는 ‘4종 세트’ 흐름을 자주 씁니다.

ChatGPT는 아이디어를 실행 가능한 체크리스트로 바꿔준다

저는 “파란 물결무늬 테마 + 카툰 배와 잠수함”처럼 꽤 두루뭉술한 목표 한 줄을 그냥 던지고, 사이트 구조, 모듈 카피, 인터랙션 포인트를 뽑게 합니다. 작은 팁: KISS 원칙으로 쓰라고 미리 말해두세요. 홈을 논문처럼 길게 쓰지 말라고요.

Claude는 요구사항을 납품 문서처럼 정리해준다

Claude는 “Bento Grid 검정 배경 + 포인트 컬러 #2657FD, 초대형 숫자, 애플식 스크롤 모션, Framer Motion과 Tailwind CDN” 같은 요구를 개발자가 이해할 수 있는 스펙으로 정리하는 데 딱 좋고, 동시에 경계 조건도 보완해줍니다. 예를 들어 그라데이션을 남발하지 말 것, 이모지를 메인 아이콘으로 쓰지 말 것 같은 것들요.

Midjourney는 비주얼 에셋의 톤을 빠르게 잡아준다

저는 두 종류의 이미지를 뽑게 해요. 하나는 메인 KV 일러스트(배/잠수함/우주 카툰 캐릭터), 다른 하나는 장식용 선화(라인 드로잉) 소요소입니다. 먼저 9분할 그리드로 방향을 잡고, 그다음 일부를 확대해 디테일을 다듬습니다. 안 그러면 “딱 조금만 아쉬운데”의 무한 반복에 빠져 멘붕 오기 쉬워요.

Gemini는 대조 검수와 빈틈 메우기를 맡는다

Gemini는 저는 ‘경험(UX) 심사’에 더 자주 써요. 방문자 시점에서 트집을 잡게 해서 정보가 구체적인지, 대화를 이어갈 여지가 있는지(“좋아요” 같은 빈말만 있지 않은지) 점검하고, 더 사람 손으로 쓴 것 같은 소개문과 FAQ 버전도 한 번 더 뽑아줍니다.

제 개인적인 작은 푸념

기본 모델 설정은 꼭 고정해두세요. 모델을 왔다 갔다 바꾸다 보면 새 주제에서 갑자기 “기억상실” 걸리는 게 진짜 짜증납니다.

이 흐름을 그대로 당신 프로젝트에 적용해서 시행착오를 줄이고 싶다면, Titikey에 제가 정리해둔 도구와 템플릿을 보러 가세요. 시간 꽤 아낄 수 있을 거예요.