나만의 브랜드 웹페이지 만들기

소개

지난주 과제로 고도화했던 퍼스널 브랜딩 게시글을 바탕으로 이번주에는 나만의 브랜드 웹페이지를 만드는 과정이다.

진행 방법


먼저 Claude 에게 이전에 게시했던 퍼스널 브랜딩 게시글 링크를 주고, 나만의 퍼스널 브랜딩 맵을 만들어 달라고 요청했습니다.

사용도구 1 : Claude LLM

사용한 프롬프트 1.

퍼스널 브랜드 맵 생성 프롬프트
너는 퍼스널 브랜딩 전략가이자 브랜드 맵 설계자야.  지금부터 내가 제공하는 정보(스터디 사례글 링크)를 바탕으로  나만의 퍼스널 브랜드 맵(Brand Map) 을 만들어줘.


목표
이 작업의 목적은 멋진 소개 문장을 만드는 것이 아니다.  내 브랜드를 구성하는 요소들을 구조적으로 정리해서,  내가 누구를 위해, 어떤 문제를, 어떤 방식으로 해결하며,  왜 나여야 하는지를 한눈에 보이게 만드는 것이다.


전제
* 브랜드 맵은 "희망사항"보다 "현재 드러난 패턴과 증거"를 우선해서 작성해줘.
* 내가 바라는 미래 방향도 포함하되, 반드시 현재 브랜드와 지향 브랜드를 구분해줘.
* 추상적 칭찬은 하지 말고, 입력된 정보 안에서 반복적으로 드러나는 특징을 근거로 해석해줘.
* 브랜딩 문구만 만들지 말고, 실제 행동과 콘텐츠, 서비스, 고객경험으로 이어질 수 있게 정리해줘.
* 내가 AI를 활용하고 있다면, 단순 도구 사용이 아니라 "어떻게 활용하는 사람인가"로 해석해줘.
* 각 항목은 3~5줄 이내로 핵심만 써줘. 단, 브랜드 맵 표와 실행 우선순위는 예외.


입력 자료
사례글 링크 
아래 링크를 직접 읽고 분석해줘.  링크가 여러 개면 전부 읽은 뒤 공통 패턴을 중심으로 해석해줘.
(https://www.gpters.org/nocode/post/enhancing-your-personal-brandbrand-V7uemi0U6eTMlNs)

다음 브랜드 맵 예시 파일을 참고 파일로 주고, 브랜드 맵을 완성하여 파일로 전달해 달라고 요청했습니다.

사용 프롬프트 2.

업로드한 파일의 예시를 확인해서 내 브랜드의 맵을 작성해줘. 니 마음대로 쓰지말고 확인되지 않은것들은 꼭 물어봐!

출력된 파일은 Docx 파일이었으나, 추후 웹페이지 제작을 위해 나중에 md 파일로 다시 요청해서 받았습니다.

다음은, 다운받은 브랜드 맵 파일을 주고, PRD를 작성해달라고 요청했습니다.

사용 프롬프트3.

나의 브랜드 맵을 확인해서 PRD를 작성해야한다. 업로드한 PRD 예시 파일을 참고해서 작성하는데 확인해야하는건 꼭 물어보고 니 마음대로 쓰지말고 !! 출력하기 전에 스스로 검토해서 포멧에 맞게 출력해!

PRD 파일도 Docx 파일로 출력 받았으나, 다시 md 파일로 요청해서 추가로 다운로드 받아둡니다.

그리고 바이브코딩을 위해 처음에는 구글 AI 스튜디오로 갔습니다.

준비된 2개의 파일, 브랜드 맵 + PRD 파일을 업로드하고 웹페이지 제작을 요청하기 위해서였습니다.

그런데... 구글 AI 에서는 첨부할 수 있는 파일 형태로 Docx도 md도 지원하지 않았습니다.

할 수 없이 젠스팍으로 가서 웹페이지 제작을 의뢰합니다.

사용도구 2 : Genspark

사용 프롬프트 4.

위 브랜드맵과 prd를 참고해서 웹사이트 만들어줘.

결과와 배운 점

아래는 젠스파크에서 만들어준 결과물입니다.

한국어로 된 웹사이트의 홈페이지

다양한 유형의 휴대폰을 보여주는 웹사이트 페이지의 스크린샷

한국어 텍스트가 포함된 웹사이트 스크린샷

한국어 텍스트가 적힌 보라색 화면

별 5개 등급을 받은 한국 웹사이트의 홈페이지

한국어로 된 웹사이트의 홈페이지

바이브코딩으로 뚝딱 나온 결과물 치고는 나름 괜찮았습니다.

다음은 안티그래비티에도 테스트해보고 싶어서 같은 자료와 프롬프트로 요청해봤습니다.

사용도구 3. 안티그래비티

아래는 같은 자료와 프롬프트로 나온 결과물 캡쳐 이미지 입니다.

한국어로 된 웹사이트의 홈페이지

한국 웹사이트의 가격 페이지

젠스팍과 안티그래비티의 결과물만 보자면, 젠스팍 쪽 디자인이 아기자기한 면이 있어 더 좋아 보였습니다.

단순한 MVP 형태로 먼저 본거라서, 기능적인 부분을 꼼꼼히 보지는 못했지만, 개인적으로는 안티그래비티에 대한 기대감이 좀 있어서, 더 공부를 파본 후에 다시 구체적인 디자인과 기능 구현을 테스트해보려고 합니다.

과제를 수행하면서 가볍게라도 바이브코딩을 경험하려고 구글 AI 스튜디오 사용을 시도하였으나 파일 업로드가 안되는 걸 보고 적잖이 당황했습니다. 스터디장님께서 젠스팍이나 러버블, 기타 바이브코딩 툴을 사용하라고 추천해주셨는데, 그 안에 구글 AI 스튜디오가 빠진것이 이런 이유 때문인가? 싶기도 했습니다.

이번주 과제는 지난주부터 내내 몸상태가 좋지 않아 과제와 수업에 집중할 수 없는 암울한 기간을 보냈기에, 완성도있게 진행하지 못한 점이 크게 아쉽습니다.

도움 받은 글 (옵션)

스터디장님께서 주신 자료가 없었다면 이런 결과물을 얻지 못했을 것입니다.
그저 넣기만 했는데도 마법같은 결과물이 쏟아져 나오는 것을 보고 적잖이 감동했습니다. 귀중한 자료와 인사이트, 그리고 솔선해서 봉사해주시는 정신과 태도에 스터디에 참여하는 동안 배운점이 많았습니다. 이 자리를 빌어 감사의 말씀 전합니다.

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요