소개
지난번 브랜딩을 위한 기초작업 후 이제, 웹페이지를 만들어보려고 합니다.
사실, 제 사업이 아니다보니.. 스타트업실험실에서 배운 툴을 많이 사용해보고 익히는게 더 목적이 되어버렸네요.. (미안하다 동생아)
진행 방법
웹페이지 디자인 : Lovable, V0
웹페이지 수정보완 : cursor
지난 사례에서 브랜딩관련 PRD를 작성해봤던 내용을 Lovable과 V0에게 각각 프롬프트 주고 웹페이지를 만들어달라고 해보았습니다. 둘 중 좀 더 마음에 드는 것을 바탕으로 보완하기 위해서였죠
PRD를 보내줄게. 어떤 작업을 하지는 말고 학습만 한 후 준비되었음을 알려줘 ``` # 📘 Product Requirements Document (PRD) ## 🎯 프로젝트: 브랜딩 랜딩페이지 (프론트엔드 포트폴리오용) --- ## 1. ✅ Project Overview (프로젝트 개요) 이 프로젝트는 **프론트엔드 개발자로서의 퍼스널 브랜딩**을 위한 랜딩페이지이며, 본인의 사이드 프로젝트 또는 클라이언트 작업물인 **공간대여 서비스**를 소개하는 데 목적이 있습니다. 방문자가 서비스의 감성, 기능, 타깃에 대해 빠르게 이해하고, 실제 서비스를 이용하거나 공유할 수 있도록 구성합니다. --- ## 2. 🧩 Core Functionalities (핵심 기능) | 섹션 | 설명 | 비고 | |------|------|------| | Hero Section | 서비스 대표 문구 및 대표 이미지 | 슬로건 활용 | | 서비스 소개 | 희나스페이스 핵심 키워드 및 가치 문구 표현 | 카드형 UI 추천 | | 특징 안내 | 공간 특징(전면 거울, 피아노, 식탁 등) 아이콘 또는 목록으로 소개 | 아이콘 또는 이미지 | | 사용자 후기 | 실제 이용자 후기 요약 (더미데이터 가능) | 마크업용 | | CTA (Call to Action) | “지금 예약하기”, “후기 보기” 등 버튼 | 하단에 고정 | | Footer | SNS 링크, 이메일, 제작자 이름 등 | 간단하게 정리 | ------------ (중략) ---------------실제 웹사이트만 비교했을 때, 기본 base로 수정하기 좋은 페이지는 V0 더라구요. 그래서 선택
해당 내용을 gitHub로 업로드하고, 그 코드를 cursor로 가져와 blank image를 저희 실제 공간 이미지로 채우고, 후기도 실제 후기 작성했던 이미지와 내용으로 수정했어요
결과와 배운 점
정식으로 제대로 브랜딩을 만든 것은 아니지만,
배운 내용을 토대로 프로세스를 밟아가는데 하나의 컨셉으로 끝까지 한번 진행해보면 좋겠다 싶어서 시도하고 있습니다.
이번 16기에서는
브랜딩 및 PRD 작성하기
PRD를 기반으로 웹페이지 만들기
여기까지 진행했고, 다음 사례는 웨페이지 배포, 인스타그램 생성 및 카드형식의 마케팅을 시작하는 것을 목표로 하고 있습니다.
많이 미천하지만 포기하지 않고 끝까지 한 turn 돌려보겠습니다.
도움 받은 글 (옵션)
스타트업실험실 강의 및 사례