3주차
나만의 프로필 랜딩페이지 만들기
설계도(프롬프트) 하나로, AI가 웹사이트를 대신 지어줍니다.
아래로 넘기면 시작합니다
오늘 이후에 여러분은 이렇게 변합니다.
네 가지만 하면 오늘은 성공입니다.
- 1프롬프트가 왜 '설계도'인지 이해합니다.문장 하나하나가 웹사이트의 어느 자리, 어떤 모습이 되는지 알게 됩니다.
- 2내 이름·학력·경력을 채워 나만의 완성 프롬프트를 만듭니다.노란 칸만 눌러서 내 이야기로 바꾸면 됩니다.
- 3구글 AI 스튜디오에 붙여넣어 실제로 페이지를 만들어봅니다.몇 분 안에 눈으로 결과를 확인합니다.
- 4마음에 안 드는 부분은 AI에게 다시 말해서 고쳐봅니다.한 번에 완벽할 필요 없습니다. 대화하듯 다듬으면 됩니다.
지난주엔 '조사'를, 오늘은 '보여주기'를 배웁니다
노트북LM으로 자료를 모으고 검증했다면, 오늘은 그 결과를 세상에 보여줄 공간을 만듭니다.
- 지난주까지는 AI에게 '찾아줘', '정리해줘'라고 시켰습니다.
- 오늘은 조금 더 나아가서, AI에게 '만들어줘'라고 시켜봅니다.
- 만드는 대상은 코드 몇 줄이 아니라, 실제로 인터넷에 띄울 수 있는 웹페이지입니다.
프롬프트 = 건축 설계도
AI에게 "집을 지어줘"라고만 하면 곤란하죠? 방이 몇 개인지, 어디에 무엇을 둘지 정확히 알려줘야 합니다.
AI가 알아서 채우다 보니, 나와 다른 엉뚱한 결과가 나옵니다.
내 이름과 경력만 채우면, AI가 설계도 그대로 지어줍니다.
주의
실제로 공개되는 정보입니다
오늘 만드는 페이지는 인터넷에 공개될 수 있는 화면입니다. 다음 세 가지만 지켜주세요.
- 사업자등록번호·주소처럼 민감한 정보는 사업자가 아니라면 이 칸은 비워두거나 나중에 채우세요.
- 휴대폰 번호처럼 꼭 필요하지 않은 개인정보는 굳이 넣지 않아도 됩니다.
- 완성한 프롬프트는 구글 AI 스튜디오에만 붙여넣습니다. 다른 사람과 공유할 땐 한 번 더 확인하세요.
실전 — 나만의 프로필 페이지 프롬프트 완성하기
사업을 하시든, 회사에 다니시든 상관없습니다. 노란 칸을 하나씩 눌러 내 이야기로 바꾸세요. 다 채웠으면 복사해서 아까 열어둔 구글 AI 스튜디오에 붙여넣습니다.
노란 칸에는 무엇을 적으면 되는지 안내 글이 들어 있습니다. 그 글을 지우고 내 이야기로 바꿔보세요. 급하면 몇 칸은 나중에 채워도 됩니다.
Next.js 16 App Router + TypeScript + Tailwind CSS v4로 개인 프로필 랜딩페이지 " PROFILE"을 만들어주세요. 디지털 명함처럼 한 페이지에서 나를 소개하는 원페이지 랜딩 구조입니다. ## Header (상단 고정 네비게이션 바) - 왼쪽: 텍스트 로고 "" - 가운데: 소개, 경력, 하는 일, 활동, 문의 메뉴 (클릭 시 해당 섹션으로 부드럽게 스크롤) - 오른쪽: 에메랄드색 "연락하기" 버튼 - 스크롤 시 헤더 배경이 반투명 블러 처리로 변경 ## Hero - 좌측 영역 - 작은 뱃지: "" - 대제목: "" (우측 상단에 30도 기울어진 에메랄드색 "" 배지 포함) - 부제: "" - 설명 문단: "" - 버튼 2개: "포트폴리오 보기"(에메랄드 Primary), "이메일 보내기"(검정 테두리 아웃라인, mailto: 링크) - 우측 영역: 프로필 사진 (정사각형, 라운드 24px, 은은한 그림자, 일단 placeholder 이미지) - 하단 숫자 카운터 3개: / / ## About (소개) - 제목: "ABOUT ME" - 부제: "무엇을 하는 사람인가" - 좌측: 자기소개 문단 3개 1) 2) 3) - 우측: 키워드 태그 나열 () ## Career (경력 & 학력) - 제목: "CAREER" - 세로 타임라인 형태, 왼쪽에 연도 / 오른쪽에 소속·역할·한 줄 설명 - - - - - 하단에 "EDUCATION" 소제목 + 학력 카드 (학교명 / 전공 / 졸업연도): ## Business (하는 일 소개 — 사업이든 회사 업무든 자유롭게) - 제목: "WHAT I DO" - 3열 카드 그리드, 각 카드에 아이콘 + 제목 + 2줄 설명 - 카드 1: - 카드 2: - 카드 3: - 카드 호버 시 살짝 떠오르는 효과 + 테두리 에메랄드로 변경 ## Portfolio (작업물) - 제목: "PORTFOLIO" - 부제: "직접 만든 결과물들" - 3x2 정사각형 이미지 그리드 (placeholder 이미지) - 호버 시 어두운 오버레이 위로 제목과 한 줄 설명 노출 ## Activity (강의·자격증·수상·미디어 등 내세우고 싶은 활동 이력) - 제목: "" - 2열 리스트 카드, 각 항목에 기관·활동명 / 내용 / 연도 - - - - 각 카드 좌측에 세로 에메랄드 바 액센트 ## Contact (문의) - 제목: "지금 바로 연락주세요" - 부제: "" - 이메일 주소()를 크게 표시 + 클릭 시 mailto 실행 - 옆에 "복사" 버튼 — 클릭하면 클립보드에 복사되고 "복사되었습니다" 토스트 표시 - 아래에 SNS 아이콘 링크 나열: ## Footer - 좌측: - 우측: 이용약관, 개인정보처리방침, © 2026 . All rights reserved ## 기능 - 각 섹션 스크롤 진입 시 아래에서 위로 페이드인 애니메이션 - 헤더 메뉴 클릭 시 앵커 스무스 스크롤 - 이메일 복사 버튼 클립보드 동작 + 토스트 - 모바일 반응형: 헤더는 햄버거 메뉴, 그리드는 1열로 전환 ## 디자인 - 전체 배경: 밝은 회색 (#F7F8F9), 카드와 섹션 블록은 흰색 - Primary 색상: 에메랄드 - 폰트: Pretendard, 제목은 굵고 크게, 본문은 회색 톤 - 여백이 넉넉한 미니멀 톤, 라운드는 16~24px
노란 칸을 눌러 원하는 내용으로 바꿀 수 있습니다.
▲ 위 상자 안에서 손가락으로 밀어 나머지 내용을 볼 수 있습니다.
이렇게 됩니다 · 이 문장 그대로 구글 AI 스튜디오의 '앱 만들기'에 붙여넣으면, 여러분 이야기가 담긴 웹페이지가 자동으로 만들어집니다.
결과가 나오면 — 대화로 다듬습니다
한 번에 완벽하지 않아도 됩니다. 마음에 안 드는 부분을 대화하듯 다시 요청해보세요.
다 하신 칸은 눌러서 표시해 두세요. 어디까지 했는지 저장됩니다.
오늘 정리하고 마칩니다
설계도(프롬프트) 하나로, 여러분 이름이 박힌 웹페이지를 오늘 직접 완성하셨습니다.
- 프롬프트가 왜 설계도인지 이해했습니다
- 내 이름·학력·경력을 채워 완성 프롬프트를 만들었습니다
- 구글 AI 스튜디오에서 실제로 페이지를 만들어봤습니다
- 대화하듯 요청해서 결과물을 다듬어봤습니다
다음 주 예고
4주차 예고
이번엔 완전히 다른 걸 만듭니다. 좋아하는 가수 느낌으로, 나만의 노래를 AI와 함께 만들어봅니다.
- 오늘 완성한 프롬프트와 결과 화면 링크는 꼭 저장해두세요.
- 시간이 부족했다면, 집에서 나머지 칸을 마저 채워 다시 실행해보세요.
- 궁금한 점은 단톡방에 편하게 올려 주세요.