📝 한줄 요약
오랜만에 이직을 준비하다 보니, 지원 페이지마다 있는 '개인 홈페이지 URL' 입력란이 새삼 눈에 띄었습니다. 그때는 개발자도 아닌 제가 개인 홈페이지를 가질 일은 없다고 생각했는데, 지금은 프로필 페이지가 없다는 것 자체가 경쟁력의 공백처럼 느껴져 그 칸을 비워 두는 것이 아쉬웠습니다.
마침 스터디장님께서 첫 주 실습 과제로 바로 이 작업을 내주셨고, 이번 기회에 직접 만들어 보았습니다 (아직 경력 등 세부 컨텐츠는 추가 전입니다만..). ChatGPT Work와 문구·디자인·사진·버튼·모바일 화면을 반복해서 주고받으며 index.html 단 한 장을 완성했고, Vercel을 통해 실제 배포까지 마쳤습니다.
개발 지식보다 더 중요했던 건 원하는 결과가 나올 때까지 작은 피드백을 계속 주는 것이었습니다.
완성된 페이지:
https://dina-profile.vercel.app/
바쁘시면 이것만 읽어도 돼요
처음 요청은 “한 화면짜리 간단한 개인 프로필 웹페이지를 만들어줘”였습니다.
스터디장님이 준비해주신 프롬프트 덕분에 막막하지 않게 아주 쉽게 시작할 수 있었습니다.
AI가 처음부터 완벽한 결과를 만든 건 아니고, “조금 더 아래로”, “이 버튼은 너무 검다”, “이 문장은 어색하다” 같은 작은 피드백을 계속 주고받았습니다.
JD를 넣어주니 관심 분야와 소개 문구를 직무 방향에 맞게 정리할 수 있었습니다.
사진, 컬러, 문구, Email/LinkedIn 링크, 모바일 반응형까지 하나씩 다듬었습니다.
mailto:링크가 미리보기 환경에서 막히는 문제도 있었고, Gmail 작성 링크로 바꿔 해결했습니다.이번에 처음으로 Vercel 배포라는 개념을 알게 되었고, HTML 파일 하나가 실제 URL로 공개되는 과정을 경험한 점이 특히 좋았습니다.
마지막에는 실제 URL까지 생겼고, 이제는 단순한 연습물이 아니라 누구에게나 보여줄 수 있는 개인 프로필 페이지가 됐습니다.
🎯 이런 분들께 도움돼요
개발은 잘 모르지만 개인 프로필 사이트를 직접 만들어보고 싶은 분
이력서나 LinkedIn 외에 나를 소개할 한 장짜리 링크가 필요한 분
AI에게 코딩을 시켜봤지만 결과물이 늘 “조금 아쉬웠던” 분
디자인 감각은 있지만 HTML/CSS를 직접 수정하기는 부담스러운 분
AI와의 대화를 실제 배포 가능한 결과물까지 연결해보고 싶은 분
1. 시작은 정말 단순했습니다
제가 원한 건 딱 하나였습니다.
처음 나를 만나는 사람에게 보여줄 수 있는, 깔끔한 한 장짜리 프로필 페이지.
스터디장님이 미리 준비해주신 프롬프트가 있어서 아주 쉽게 첫 발을 뗄 수 있었다는 점이 좋았습니다.
“이 정도만 입력해도 웹페이지가 만들어지는구나”라는 경험 자체가 진입 장벽을 많이 낮춰줬습니다.
첫 결과물은 깔끔했지만, 당연히 “내 페이지 같다”는 느낌은 부족했습니다.
여기서부터 진짜 작업이 시작됐습니다.
2. “이 느낌으로 바꿔줘”부터 디자인이 달라지기 시작했습니다
마음에 드는 레퍼런스 이미지를 보여주고,
“이 분위기로 디자인 업데이트”
라고 요청했습니다.
그러자 단순 카드형 프로필이 아니라,
연보라 배경
둥근 카드
프로필 이미지 영역
관심 분야 카드
부드러운 그라데이션
이 들어간 형태로 바뀌었습니다.
여기서 배운 점이 하나 있었습니다.
디자인을 말로 길게 설명하는 것보다, 레퍼런스 이미지를 보여주는 게 훨씬 빠릅니다.
“깔끔하게”, “세련되게” 같은 말은 사람마다 다르게 해석되지만, 이미지는 훨씬 명확했습니다.
3. JD를 넣으니 소개 문구가 훨씬 구체적으로 바뀌었습니다
그다음에는 제가 참고하고 있던 JD를 첨부했습니다. 딱히 내가 무엇을 하고 있는 사람인지 정리가 안되는 분들 계시다면, 지금 업무 혹은 이직하고 싶 은 ROLE의 JD를 링크드인에서 다운 받으셔서 첨부하면 좋을 것 같습니다.
그래서 단순히 “신사업 / 전략 / 공공 협업”이라고 적는 대신, 관심 분야를 좀 더 구체적으로 정리할 수 있었습니다.
소개 문구도 여러 번 바뀌었습니다. 최종적으로는:
변화를 읽고, 기회를 성공으로 만드는 전략가
로 정리했습니다.
이 과정에서 느낀 건, AI가 문장을 “완성해주는 도구”라기보다 내가 원하는 뉘앙스를 찾을 때까지 같이 후보를 만드는 편집 파트너에 더 가깝다는 점이었습니다.
4. 가장 많이 한 말은 사실 “조금만”이었습니다
이번 작업에서 제가 ChatGPT에게 가장 많이 한 요청은 대단한 프롬프트가 아니었습니다.
오히려 이런 말들이었습니다.
“사진 조금 더 키워줘”
“한 칸 오른쪽으로”
“머리가 잘렸어, 사진 조금 내려줘”
“커피 이모티콘 조금 아래로”
“LinkedIn 버튼 너무 블랙인데 조금 연하게”
“Email 버튼은 핑크빛 음영으로”
“폰트 하나만 더 키워줘”
“이 문장은 분야로 끝나면 안 돼”
이런 요청이 반복됐습니다.
처음에는 이게 비효율적인가 싶었는데, 오히려 반대였습니다.
사람 디자이너와 협업할 때도 결국
“조금 더 여백”, “이 색은 약간 진하다”, “사진이 조금 작다”
같은 피드백을 주고받습니다.
AI에게도 똑같이 하면 됐습니다.
완벽한 프롬프트 한 번보다, 작은 수정 여러 번이 더 좋은 결과를 만들 었습니다.
5. 프로필 사진도 여러 번 바꿨습니다
처음에는 이니셜 D만 들어간 네모칸이었습니다.
그다음 실제 사진을 넣었는데,
머리가 잘리고
얼굴 위치가 너무 위에 있고
기존 사진이 페이지 분위기와 잘 안 맞고
여러 문제가 있었습니다.
그래서 다른 사진으로 바꾸고, 더 전문적인 느낌의 프로필 사진으로 조정했습니다.
중간에 AI가 새 이미지를 통째로 만들어버린 적도 있었는데, 제가 원한 건 사실 기존 HTML의 사진 칸만 교체하는 것이었습니다.
그래서 작업 범위를 다시 명확하게 지정했습니다.
이 경험을 통해 “이것만 바꿔”, “나머지는 건드리지 마”라는 식의 범위 지정도 AI와 협업할 때 꽤 중요하다는 걸 느꼈습니다.
6. 버튼 하나도 실제로 눌러봐야 끝입니다
Email 버튼에는 처음 mailto: 링크를 넣었습니다.
HTML만 보면 문제없어 보였습니다.
그런데 실제로 눌러보니 브라우저에서 오류가 났습니다.
미리보기 환경에서 mailto: 호출이 보안 정책 때문에 막힌 것이었습니다.
그래서 Email 버튼을 Gmail 작성 화면으로 직접 연결하는 HTTPS 링크로 바꿨습니다.
LinkedIn 버튼은 실제 프로필 주소를 연결했습니다.
그리고 마지막에는 버튼 디자인도 조정했습니다.
Email → 연한 핑크 음영
LinkedIn → 연한 보라 음영
마우스를 올리면 살짝 위로 튀어나오는 hover 효과
누르면 살짝 눌리는 active 효과
여기서 또 하나 배웠습니다.
“링크를 넣었다”와 “실제로 작동한다”는 다른 이야기였습니다.
AI가 만든 결과물도 마지막에는 직접 눌러봐야 합니다.
7. 모바일 화면도 따로 봐야 했습니다
처음 요청할 때부터 PC와 모바일에서 모두 보기 편하게 해달라고 했습니다.
그래서 CSS에 반응형 구간을 넣고,
사진 크기
카드 배치
버튼 폭
관심 분야 카드
폰트 크기
를 화면 너비에 맞게 다르게 설정했습니다.
마지막에는 내용, 링크, 모바일 가독성까지 최종 점검을 요청했습니다.
이 과정에서 화면에는 보이지 않는 meta description이 예전 문구로 남아 있다는 것도 발견했고, 최종 문구로 다시 수정했습니다.
이런 부분은 제가 직접 HTML을 열어봤어도 놓쳤을 가능성이 높습니다.
8. 이번에 처음 알게 된 Vercel 배포
개인적으로 이번 과정에서 꽤 인상적이었던 부분은 Vercel 배포를 처음 알게 된 것이었습니다.
그전까지는 HTML 파일을 만들면 그냥 내 컴퓨터에서 열어보는 정도로 생각했습니다.
그런데 이번에 처음으로,
“완성한
index.html을 실제 URL로 공개할 수 있구나.”
라는 걸 알게 됐습니다.
특히 배포를 하고 나니 결과물이 완전히 다르게 느껴졌습니다.
그전까지는 “내가 만든 파일”이었다면,
배포 후에는 “누구에게든 링크 하나로 보여줄 수 있는 웹페이지”가 됐습니다.
웹페이지를 만드는 경험도 좋았지만, 배포 라는 개념을 직접 경험한 것 자체가 이번 스터디에서 얻은 꽤 큰 수확이었습니다.
9. 결국 index.html 하나가 개인 프로필 페이지가 됐습니다
최종 결과는 외부 라이브러리 없이 동작하는 index.html 하나였습니다.
사진도 HTML 안에 포함시켜 별도 이미지 파일 없이 열 수 있게 했습니다.
처음에는 “프로필 한 장”이었는데, 점점 개인 홈페이지에 가까운 형태로 발전했습니다.
10. 오프라인 모임에서는 더 살을 붙여보고 싶습니다
지금 결과물도 만족스럽지만, 오히려 한 번 만들어보고 나니 더 해보고 싶은 게 생겼습니다.
오프라인 모임에서는 지금 만든 페이지에 조금 더 살을 붙여서,
간단한 경력/프로젝트 소개
작업 사례
개인적인 관점이나 콘텐츠
관련 링크 모음
같은 요소도 추가해보고 싶습니다.
지금은 HTML 파일을 수정하고 다시 배포하는 흐름으로 작업했지만, GitHub와 연동하면 파일을 관리하고 변경 이력을 남기고, 업데이트를 배포까지 연결하는 과정이 훨씬 체계적으로 바뀔 것 같습니다.
11. 제가 가장 크게 배운 점
이번에 웹사이트 하나를 만든 것보다 더 흥미로웠던 건, AI와 일하는 방식 자체였습니다.
처음에는 “AI가 웹사이트를 만들어준다”고 생각했습니다.
그런데 실제로 해보니 조금 달랐습니다.
AI가 초안을 만들고,
제가 판단하고,
AI가 수정하고,
제가 다시 보고,
문구를 고치고,
디자인을 바꾸고,
버튼을 눌러보고,
문제가 생기면 다시 수정했습니다.
결국 이 런 흐름이었습니다.
아이디어 → 초안 → 피드백 → 수정 → 실제 확인 → 재수정 → 배포
AI는 코더이기도 했고, 디자이너이기도 했고, 카피라이터이기도 했습니다.
하지만 최종 디렉터는 계속 저였습니다.
가장 중요한 건 코딩 지식보다
“이건 내가 원하는 게 아니다”를 말할 수 있는 감각이었습니다.
12. 결과
결과물은 단순한 HTML 파일 하나였지만, 실제로는 꽤 많은 것이 들어갔습니다.
처음에는 “프로필 페이지 하나 만들어볼까?” 정도였는데, 끝나고 보니 AI와 함께 작은 제품 하나를 만든 경험에 가까웠습니다.
그리고 가장 좋았던 점 중 하나는, 스터디장님이 준비해주신 프롬프트 덕분에 시작 자체가 어렵지 않았다는 것입니다.
처음 진입 장벽을 낮춰주는 출발점이 있었기 때문에, 이후에는 자연스럽게 제 취향과 목적을 계속 덧붙이면서 결과물을 발전시킬 수 있었습니다.
