마음에 드는 사이트를 그대로 복사하는 것이 목표가 아니라, 첫 화면에서 무엇이 먼저 보이는지, 버튼은 어디에 있는지, 섹션이 어떤 순서인지 읽어내는 것이 목표입니다. 레퍼런스는 내 페이지를 설명하는 말을 찾는 데 쓰입니다.
Siteinspire 같은 웹 갤러리는 잘 만든 웹사이트를 한곳에 모아 둔 참고 창고입니다. 이런 곳에서는 어떤 첫 화면이 강하게 보이는지, 어떤 타이포와 이미지가 쓰였는지 빠르게 비교할 수 있습니다.
게임 소개 페이지를 만들면서 제품 문서 사이트만 오래 보고 있으면 바로 도움이 안 될 수 있습니다. 먼저 내 주제와 비슷한 분야, 비슷한 분위기의 참고를 고르면 관찰 포인트가 훨씬 또렷해집니다.
좋은 참고 사이트를 보면 첫 화면에서 브랜드나 주제가 강하게 보입니다. Nintendo 같은 사이트는 큰 비주얼과 로고, 대표 버튼으로 “무엇에 대한 페이지인지”를 아주 빠르게 알려줍니다.
초심자는 모든 디테일을 한 번에 보려고 하면 금방 눈이 흐려집니다. 제목, 대표 이미지, 첫 버튼, 그리고 다음 섹션이 어떤 순서로 이어지는지 이 네 가지만 먼저 보면 좋은 관찰을 시작할 수 있습니다.
Notion 같은 제품 사이트는 화려하게 흔들리지 않아도 아주 좋은 참고가 됩니다. 차분한 제목, 제품 화면, 설명 문장, 버튼, 아래로 이어지는 섹션 순서가 어떻게 정리되는지 읽기 좋기 때문입니다.
“예쁘다”는 감상만으로는 다음 단계로 못 갑니다. 제목이 크다, 버튼이 분명하다, 카드가 반복된다, 분위기가 밝다처럼 눈에 보인 장면을 짧은 제작 언어로 바꾸는 순간 AI에게도 말할 수 있습니다.
같은 문장, 같은 로고, 같은 사진을 그대로 가져오면 내 작품이 아니게 됩니다. 대신 제목이 먼저 보이는 방식, 카드가 반복되는 방식, CTA가 놓이는 방식을 빌려오면 참고를 잘 쓴 것입니다.
Material Design 같은 디자인 시스템 사이트는 버튼, 카드, 입력창, 섹션 구조를 정확한 이름으로 정리해 둡니다. 그래서 “무슨 부품이 필요한지”를 말하는 데 큰 도움이 됩니다.
한 사이트만 보고 따라 하라고 하면 AI가 너무 비슷하게 만들 수 있습니다. 비슷한 분야의 참고 두세 개를 섞어서 제목, 이미지, 버튼, 섹션 순서로 설명하면 훨씬 더 안정적이고 내 주제에 맞게 나옵니다.
“이 사이트 느낌으로”라고만 말하면 AI가 무엇을 가져와야 하는지 모릅니다. 어떤 부분을 참고할지 분리해서 말하면 훨씬 더 정확하게 결과가 나옵니다.
다음 시간에는 이 세 개의 참고를 바탕으로 실제 AI 웹 요청문을 만들게 됩니다. 참고를 많이 모으는 것보다, 왜 골랐는지 설명할 수 있는 참고를 고르는 것이 더 중요합니다.
좋은 웹 참고는 마음에 드는 사이트를 그대로 따라 하는 일이 아니라, 첫 화면과 버튼과 섹션 구조를 읽어서 내 프로젝트에 맞는 언어로 바꾸는 일입니다. 제목, 대표 이미지, CTA, 섹션 순서를 먼저 보면 초심자도 충분히 좋은 관찰을 시작할 수 있습니다.
내가 만들 것은 초등 독서 모임 소개 페이지야. Nintendo처럼 첫 화면에서 제목과 대표 이미지가 강하게 먼저 보이게 해줘. Notion처럼 설명 문장은 차분하게 읽히게 해줘. 첫 화면 아래에는 활동 소개 카드 3개와 신청 버튼 섹션을 이어서 보여줘.
참고 1 이름 / 고른 이유: _______________________
참고 2 이름 / 고른 이유: _______________________
참고 3 이름 / 고른 이유: _______________________
첫 화면에서 먼저 보인 것: _____________________
AI에게 말할 관찰 문장 2개: ____________________
레퍼런스: 내 작업을 설명하는 데 참고하는 실제 예시입니다.
CTA: 사용자가 다음 행동을 하게 만드는 대표 버튼이나 링크입니다.
첫 화면: 페이지를 열었을 때 가장 먼저 보이는 구간입니다.
섹션 순서: 소개, 카드, 후기, 신청처럼 내용이 이어지는 순서입니다.