소개
이번 주 사례글은 이미 하나를 썼지만, Codex 오프모임에서 배운 기능으로 랜딩페이지를 실제 공개 링크까지 만들어 본 경험도 짧게 남기고 싶었습니다.
처음에는 스터디장님이 애플 홈페이지를 참고 사이트로 추천해주셨습니다. 하지만 애플을 그대로 따라 하면 결과물이 “애플 느낌의 클론”으로 끝날 수 있겠다는 생각이 들었습니다.
그래서 질문을 바꿨습니다.
유명한 홈페이지를 그대로 따라 하기보다, 제가 다루는 부동산 AI 영역을 가장 잘 표현할 수 있는 홈페이지를 추천해달라.
다양한 공학 유형의 한국 이름 목록
그 결과 Teenage Engineering 스타일이 1순위로 제안됐고, 추천 이유를 들은 뒤 제가 선택했습니다. 강한 첫 화면 메시지와 제품 중심의 시각 구성이 부동산 AI 교육 콘셉트와 더 잘 맞는다고 판단했습니다.
이번에 제가 얻은 가장 큰 인사이트는 AI가 추천한 결과를 그대로 받는 것이 아니라, 왜 1순위인지 듣고 내 도메인에 맞는지 판단하는 과정이었습니다.
한국어 텍스트가 있는 웹사이트
그림 1. 공개 배포한 RE:AI Academy 랜딩페이지 첫 화면
공개 링크: https://reai-academy-gpters23.sachol.chatgpt.site
진행 방법
이번에는 역할이 다른 기능을 조합해 사용했습니다.
Product Design 플러그인: 랜딩페이지의 화면 방향을 제안하고, 선택한 방향으로 페이지를 만드는 기능입니다.
ImageGen: 랜딩페이지에 어울리는 이미지를 만드는 기능입니다.
Sites: 완성한 페이지를 공개 링크로 배포하는 기능입니다.
앱샷: 문제가 보이는 화면을 첨부해 디자인 피드백을 더 정확하게 전달하는 기능입니다.
OG 설정: 링크를 카카오톡이나 슬랙에 붙였을 때 대표 이미지·제목·설명이 보이게 하는 정보입니다.
1. 스터디장님이 주신 추천 프롬프트를 참고했습니다
스터디장님은 Product Design 플러그인을 소개하면서 아래와 같은 예시 프롬프트를 주셨습니다.
4주짜리 코덱스 입문 스터디를 소개하는 랜딩 페이지를 만들고 싶어. 이 페이지에 적합한 이미지를 3장정도 만들어줘.
내가 선택할 수 있도록 각 이미지는 서로 다른 느낌이어야해.
보는 사람: AI를 업무에 써보고 싶은 직장인 입문자
알릴 내용: 무엇을 배우는지, 매주 무엇을 하는지, 어떻게 참여하는지
방문자가 할 행동: 커리큘럼을 확인하고 참여 방법 보기
분위기: 밝고 가벼운 편집 스타일, 여백이 넓은 화면이 프롬프트에서 좋았던 점은 단순히 “예쁜 페이지를 만들어줘”라고 요청하지 않고, 누가 보는지·무엇을 알릴지·방문자가 무엇을 하게 할지·어떤 분위기인지·서로 다른 이미지 방향을 몇 개 받을지를 먼저 정리한다는 점이었습니다.
저는 이 질문의 틀을 부동산 AI 교육 도메인에 맞게 바꿔 적용했습니다. 공인중개사가 보는 페이지라는 점, AI를 처음 실무에 써보는 사람이라는 점, 커리큘럼을 보고 사전 신청까지 이어져야 한다는 점을 담았습니다.
이렇게 도메인·대상·전달 내용·방문자 행동·분위기를 먼저 정리하니, 이미지와 페이지 구성의 방향이 훨씬 선명해졌습니다.
2. 벤치마킹한 결과를 더 현대적으로 다시 디자인했습니다
레퍼런스를 바탕으로 기본 화면을 만든 뒤, 스터디장님이 다듬어주신 아래 프롬프트를 적용했습니다.
@Product Design 이 사이트를 내용은 그대로 두고 더 현대적으로 리디자인해줘.
정보 구조는 유지하되, 첫 화면 메시지와 시각 위계를 새로 제안해줘.이 프롬프트가 좋았던 이유는 “유지할 것”과 “바꿀 것”을 명확하게 나눴기 때문입니다.
유지할 것: 과정 소개, 커리큘럼, 수강 혜택처럼 이미 정리한 내용과 정보 구조
바꿀 것: 첫 화면 메시지, 제목 크기와 위치, 이미지 비중처럼 방문자가 처음 느끼는 인상
즉, 내용을 전부 다시 만드는 대신 “무엇을 말할지”는 유지하고, “어떻게 보여줄지”만 새롭게 제안받았습니다.
그 결과 첫 문장인 “부동산의 감각에 AI의 속도를 더하다”가 더 선명하게 보였고, 부동산과 AI가 만나는 이미지가 중심이 되는 더 현대적인 첫 화면이 나왔습니다.
내용과 정보 구조는 유지해줘.
대신 첫 화면 메시지와 시각 위계를 새로 제안해줘.이미 내용이 있는 페이지를 다듬을 때는 “예쁘게 만들어줘”보다, 이처럼 유지할 범위와 바꿀 범위를 구분해 요청하는 편이 결과가 좋았습니다.
3. ImageGen으로 도메인에 맞는 첫 화면 이미지를 만들었습니다
Product Design이 페이지의 방향을 잡아줬다면, ImageGen은 그 방향에 맞는 이미지를 채워주는 역할을 했습니다.
이번에는 건축 모형, 부동산 분석 화면, 차분한 업무 공간이 함께 느껴지는 이미지를 사용했습니다. 텍스트만으로는 전달하기 어려운 “부동산의 감각과 AI의 속도”라는 분위기를 첫 화면에서 보여주고 싶었습니다.
이처럼 Product Design과 ImageGen을 함께 쓰니, 페이지 구성과 이미지가 따로 노는 느낌이 줄었습니다.
4. 앱샷으로 가독성 문제를 바로 전달했습니다
완성 후 수강 혜택 영역을 보니 본문 글자가 배경과 비슷해서 읽기 어려웠습니다.
해당 단어가 포함된 한국어 페이지
그림 2. 검수과정에서 배경과 폰트 가독성 문제 발견
처음에는 “조금 더 잘 보이게 해달라”고만 말할 수도 있었습니다. 하지만 문제 구간을 앱샷으로 첨부해 직접 보여주니, 어떤 부분을 고쳐야 하는지 훨씬 정확하게 전달됐습니다.
본문 글자 대비 높이기
구분선을 더 선명하게 만들기
번호와 설명 사이 간격 넓히기
줄 간격 조정하기
정장을 입은 남자가 건물 앞에 서 있다
그림 3. 앱샷 피드백 뒤 가독성을 개선한 수강 혜택 영역
디자인 피드백에서는 “예쁘게”보다 “이 화면의 이 글자가 배경과 비슷해서 읽기 어렵다”처럼, 화면과 문제를 함께 전달하는 것이 훨씬 효과적이었습니다.
5. Sites로 공개 배포하고 OG 링크까지 설정했습니다
페이지를 만드는 것으로 끝내지 않고, Sites를 이용해 공개 링크로 배포했습니다.(매우 유용!)
또 클래스 방에 링크를 공유할 예정이어서, 링크를 붙였을 때 대표 이미지·제목·설명이 보이도록 OG(Open Graph) 정보도 넣었습니다.
랜딩페이지 1개 제작
공개 링크 1개 발급
히어로 이미지를 활용한 OG 대표 이미지 설정
공개·비공개 접근 권한을 바꿀 수 있는 상태 확인
실제 아카데미 - 스크린샷
그림 4. 메신저에 링크를 붙였을 때 보이는 OG 미리보기
결과와 배운 점
결과: 부동산 AI 교육 콘셉트의 랜딩페이지 1개를 공개 배포했고, 공유용 링크 미리보기까지 설정했습니다.
배운 점 1: 유명한 레퍼런스를 그대로 복제하기보다, 내 도메인을 먼저 설명하고 추천 이유를 듣는 편이 결과물의 방향을 더 분명하게 해줬습니다.
배운 점 2: 좋은 프롬프트는 요구사항을 길게 나열하는 문장보다, “유지할 것”과 “바꿀 것”을 구분해주는 문장이었습니다.
배운 점 3: Product Design은 화면의 방향을 빠르게 잡고, ImageGen은 그 방향에 맞는 이미지를 채워줬습니다. 두 기능을 조합하니 구성과 이미지가 더 자연스럽게 연결됐습니다.
배운 점 4: 앱샷은 디자인 피드백의 정확도를 높여줬습니다. 말로 설명하기 어려운 문제를 화면으로 바로 보여줄 수 있었습니다.
배운 점 5: 웹페이지는 공개 링크와 OG 미리보기까지 설정해야 실제로 공유할 수 있는 결과물이 된다는 것을 배웠습니다.
과정에서 느낀 한계도 있습니다. AI가 만든 첫 결과물을 그대로 쓰면 제 도메인의 말투나 가독성이 부족할 수 있었습니다. 레퍼런스 선택, 시안 선택, 피드백은 결국 사람이 맡아야 한다고 느꼈습니다.
다음에는 사전 신청 버튼을 실제 폼이나 상담 예약으로 연결해보려 합니다.😀
도움 받은 글 (옵션)
디자이너이신 버디님께서 알려주신, 앞으로 디자인 방향을 잡을 때 참고할 사이트입니다. 이번 결과물에 외부 에셋을 그대로 사용했다는 뜻은 아니고, 방향을 잡기 위한 참고 목록입니다.
