바로 15 입체 명함 효과가 있는 자기소개 페이지 만들기

박현규34 / 35절읽는 시간 약 6분

앞서 배운 HTML, CSS, 자바스크립트의 개념을 바탕으로 이제 직접 웹사이트를 만들어볼 차례입니다. 앞에서는 아주 단순한 형태의 자기소개 웹사이트를 만들고 끝났지만 이번에는 단순히 정보를 보여주는 정적인 페이지를 넘어, 사용자의 행동에 반응하는 흥미로운 페이지를 만들겠습니다. 스크롤에 따라 이미지가 바뀌는 효과처럼 복잡해보이는 기능도 커서의 [Plan] 모드를 통해 설계를 논의하고 에이전트에게 코딩을 맡긴다면 누구나 구현할 수 있습니다. 자, 이제 커서와 함께 본격적인 웹 개발을 시작해봅시다.

기억하고 있나요?

웹사이트의 3요소가 무엇인가요?

정답: HTML, CSS, 자바스크립트입니다.

가장 먼저 자기소개 페이지를 만들겠습니다. 여러분의 커리어를 사이트에 잘 정리해두었다가 자기소개서를 제출해야 할 상황이 생겼다면 이 자기소개 페이지가 굉장히 유용할 겁니다. 단순히 자기소개서만 제출하는 것이 아니라 여러분이 직접 관리한 사이트로 서류를 검토하는 사람에게 신선한 인상을 줄 수 있으니까요.

그리고 이번에 만들 자기소개 페이지는 아주 특별한 아이디어를 담았습니다. 스크롤바를 내리면 명함이 입체적으로 뒤집히면서 뒷면이 펼쳐지고 이후 스크롤바를 더 내리면 여러분의 구체적인 자기소개가 나타나는 스타일로 만들어보려고 합니다.

자기소개 페이지를 만들기 위해 필요한 건 자기소개 글이죠. 자기소개 글을 어떻게 써야 할지 모르겠다면 커서와 함께 내용을 만들 수도 있습니다. 예를 들어 여러분이 화장품 회사의 신입 디자이너로 지원하는 상황이라면 이렇게 커서와 [Plan] 모드로 대화를 시작하면 됩니다.

프롬프트

화장품 회사의 신입 디자이너로 지원하려는데 자기소개 글을 어떻게 써야 할지 당장 떠오르지 않아. 가장 좋은 방법으로 글을 쓰려는데 어떻게 해야 할까?

AI 답변

화장품 회사 신입 디자이너 지원을 준비하는군요! 화장품 업계는 트렌드에 민감하고 브랜드의 이미지를 시각적으로 구현하는 것이 핵심인 만큼, 자기소개서에서도 ‘감각적인 역량’과 ‘브랜드에 대한 이해 도’를 동시에 보여주는 것이 가장 중요합니다. 막연하게 시작하기보다, [헤드라인 - 지원동기 - 직무 역량 - 입사 후 포부]로 이어지는 논리적인 구조를 먼저 잡아야 합니다. 가장 효과적인 자기소개서 개요(Plan)를 제안해 드리기 위해, 선생님의 상황에 맞는 몇 가지 핵심 질문을 먼저 드리고자 합니다. 이 답변을 바탕으로 맞춤형 글쓰기 전략을 세워드리겠습니다.

계획을 읽어보고 마음에 들면 [Build]를 누릅니다. 커서가 직접 자기소개서를 써주거나, 자기소개서 작성 가이드를 써줄 겁니다. 만약 자기소개서 작성 가이드를 써줬다면 그 내용을 바탕으로 자기소개서를 쓰라고 다시 요청해서 자기소개서 마크다운 파일을 받으세요.

프롬프트

cover_letter_guide.md를 바탕으로 자기소개서를 써줘, 브랜드명은 한국화장품이야.

자기소개서가 완성되었습니다. 이제 이 스타일에 맞춰 자기소개 페이지를 만들면 될 것 같네요.

콘셉트, 사용할 기술, 효과 등 어떤 결과물을 만들고 싶은지 구체적인 계획을 세워서 요청 사항에 정리합니다. 이 계획을 커서와 [Plan] 모드로 논의해봅시다. 이때 자기소개서를 컨텍스트에 추가하세요.

NOTE

모델은 Gemini 3 Pro을 추천합니다.

프롬프트

2.5D로 약간의 입체감을 주는 명함의 콘셉트로 이력서 페이지를 만들고 싶어. 기술은 HTML, CSS, 자바스크립트만 이용하고 싶어. 스크롤바를 조금씩 내리면 비스듬히 놓여 있던 명함이 뒤집어지고, 스크롤바를 더 내리면 뒤집어진 명함 뒷면이 크게 확대되면서 이력서의 상세한 내용이 일반적인 웹사이트 페이지처럼 보이면 돼. 이걸 어떻게 해야 만들 수 있을까?

아마 ‘Questions’로 여러 제안을 할 텐데 뭘 골라도 상관없습니다. 저와 똑같은 결과가 나오지 않더라도 상관없으니 커서를 믿고 진행해보세요. 제가 받은 계획은 다음과 같습니다.

AI 답변

자기소개서 작성 및 이력서 웹페이지 구현 계획: 색조 화장품 패키지 디자이너

전략 수립 및 키워드 선정 (완료) • 핵심 콘셉트: “트렌드를 시각화하는 테크니션” (감각 + 툴 기술) • 주요 키워드: 색채 감각, 3D 시뮬레이션, 마감 디테일, 브랜드 아이덴티티 • 강조점: 색조 제품의 특성(발색, 텍스처)을 패키지에 어떻게 녹여낼 수 있는지 기술

자기소개서 작성 (완료) • cover_letter_draft.md 템플릿 생성 (완료) • 한국화장품 맞춤형 cover_letter_hankook.md 작성 (완료)

3D 명함 콘셉트 이력서 웹페이지 구현 (신규) • 목표: 스크롤 인터랙션을 통해 명함이 뒤집히고 확대되면서 상세 내용이 보이는 2.5D/3D 웹페이지 구현 • 기술 스택: HTML, CSS, JavaScript, Three.js (GSAP ScrollTrigger 연동 고려) ...생략..

계획을 확인하고 마음에 들면 [Build]를 눌러 진행하세요. 결과가 나오면 커서에게 [Agent] 모드로 ‘만든 웹사이트를 보고 싶다’라고 요청하세요.

프롬프트

만든 웹사이트를 보고 싶어.

그러면 커서는 ‘localhost...’로 시작하는 주소에 접속하라고 하거나 커서 내장 브라우저에 화면을 띄워줄 겁니다. 만든 결과물을 확인해보세요.

그런데 사이트를 좀 살펴보면 좀 이상합니다. 스크롤바를 내리니 화면이 너무 확대되어 보이네요. 물론 바이브 코딩으로 만든 결과물이므로 여러분 화면은 제대로 보일 수도 있고, 배경이 투명해졌을 수도 있습니다. 이렇게 원하는 화면이 제대로 만들어지지 않았을 때 어떻게 대처해야 할까요?
가장 쉬운 방법은 캡처 화면을 컨텍스트에 넣는 겁니다. 커서는 이미지도 잘 이해합니다. 이미지와 함께 문제 상황을 전달하면 더 쉽게 사이트를 수정할 수 있습니다. 이미지를 캡처해서 컨텍스트에 넣은 다음 고치고 싶은 내용을 이야기해보세요.

프롬프트

스크롤바를 내리니까 너무 확대되어서 자기소개서 글이 잘 보이지 않아. 뒤집어진 후에는 자기소개서의 글이 일반 웹 문서처럼 보여야 해.

AI 답변

확대 비율이 너무 커서 글이 잘 보이지 않는 문제를 수정하겠습니다. 뒤집힌 후에는 일반 웹페이지처럼 보이도록 변경하겠습니다. ...생략...

그러면 커서가 문제 상황을 인식하고 코드를 수정하기 시작합니다. 아마 한 번에 잘 안 될 수도 있습니다. 문제가 해결될 때까지 커서와 대화해보세요. 다음은 완성한 사이트입니다.