소개
시도하고자 했던 것과 그 이유
3주차 과제로 "나만의 프로필 페이지 만들기"를 수행하면서, 단순한 이력서나 자기소개서를 넘어서는 AI 전문가로서의 차별화된 퍼스널 브랜드 사이트를 구축하고자 했습니다.
겸사겸사 이번에 만든 명함과 디자인 컨셉을 유지하고 싶었습니다.
기존의 정적인 프로필 페이지가 아닌, 저의 핵심 역량인을 통합적으로 보여줄 수 있는 인터랙티브한 웹사이트를 만들어, 향후 강사나 컨설턴트로 활동할 때 차별화된 포트폴리오로 활용하고 싶었습니다.
진행 방법
사용한 도구와 활용 방법
1단계: 브랜드 정체성 정립 (NotebookLM)
2주차 과제였던 기존 이력서와 자기소개서를 Chat GPT에게 제시하고 나만의 사이트를 기획했습니다. 이를 통해 "복잡함을 단순화하는 AI 자동화 시스템 설계 전문가"라는 명확한 태그라인을 도출했습니다.
https://www.gpters.org/wealth/post/ai-based-smart-personal-A51teTr1LAbZ59E
2단계: 사이트 기획 (ChatGPT)
NotebookLM 결과 + 메모리를 바탕으로 ChatGPT에게 브랜드 홈페이지 기획을 요청했습니다.
사용한 프롬프트:
메모리를 참조해 아래 내용으로 내 브랜드홈페이지를 기획해주세요
[NotebookLM 전체 분석 결과 첨부]평소 제가 사용하는 스타일과 디자인 가이드가 메모리에 저장되어있어서 간단하게 내용을 받을 수 있었습니다.
3단계: 각 페이지에 넣을 프로젝트 이력 정리
GPT 웹검색으로 그동안 지피터스에서 작성한 개인 프로젝트들을 체계적으로 정리했습니다.
사용한 프롬프트:
https://www.gpters.org/member/4LbzfTHhsb
이 링크의 개인 프로젝트 페이지의 모든 내용들을 정리해서 그동안 진행한 프로젝트와 사례들을 모두 정리해줘이를 통해 이제까지 만들었던 개인 프로젝트/이미지/결과물들을 포트폴리오에 반영할 수 있었습니다. 모아놓고 보니 꽤 됐던...
또, 미드저니의 방치되어있던 이미지와 프롬프트 연습흔적들도 가져옵니다.
플로위스로 만든 방치되어있던 전자책도 가져와 추가했습니다. 이게 다 크레딧이고 돈이다
4단계: 사이트 구현
4-1. 러버블(Lovable)로 프로토타입 제작
먼저 남아도는 크레딧을 소진하기 위해 러버블에서 전체적인 틀을 빠르게 구현했습니다.
러버블에 입력한 요구사항:
페이지구성: (홈) /about /portfolio /blog /blog/:slug (개별 게시물)
디자인: 검은색 화면에서 마우스를 따라다니는 텍스트 효과
전체적인 컨셉: 도트애니메이션, 검은배경에 하얀도트로 구성된 요소들
[전체 기획 내용]4-2. GitHub 연동 및 Cursor로 완성
간단한 페이지 구조만 러버블에서 생성하고 복잡한 크레딧 많이 드는 기능은 Cursor를 통해 추가 구현했습니다: 클로드 코드를 쓸까했지만 리밋걸려서 못쓴..안타까운 사연
추가한 기능
인터랙티브 도트 애니메이션
반응형 디자인 최적화
포트폴리오/갤러리/이북/관리자 기능 등등
마지막
화룡점정푸터 추가까지 끝
최종 결과물: 포트폴리오 웹사이트 완성
결과와 배운 점
주요 인사이트와 배운 점
브랜드 정체성의 중요성: NotebookLM을 통해 기존 이력을 재정립하면서, 흩어져 있던 경험들이 "AI 전략 통합 전문가"라는 하나의 명확한 정체성으로 연결되는 것을 경험했습니다.
도구의 전략적 활용: 러버블로 빠른 프로토타이핑 → GitHub 연동 → Cursor로 고도화라는 단계적 접근을 통해, 각 도구의 장점을 최대한 활용할 수 있었습니다.
시행착오와 개선 과정
기술적인 문제가 약간 있었지만 도메인이 자꾸 떨어져서 알아보니 버셀이 이번에 업데이트하면서 아이피바뀐걸 모르고 이전 버전을 사용함
그외에는
나만의 프레임워크로 진행하니 만드는데는 2시간~3시간도 안걸렸는데, 도메인해결하는데만 2시간 걸렸습니다. 저거 언제 떨어질지 모름
향후 계획
콘텐츠 확장: 지금 업로드해놓은 프로젝트 외에도 그동안 작업한 내용들을 하나씩 정리하면서 나만의 꿀단지를 채워나갈예정입니다.
잘 키워보자
