[2주 차 미션] 마케팅 포트폴리오 웹페이지 만들고 캡처하기(Ch02 02-2)

기본 미션 - 마케팅 포트폴리오 웹페이지 만들고 캡처하기

추가 미션 1 - AI에게 디자인 수정 요청 1회 이상하고 캡처하기

추가 미션 2 - 내가 이해한 웹페이지의 구조를 한 문단으로 정리하기

이 페이지는 <header>로 만든 히어로 섹션(제목 + 핵심 태그)으로 시작해서, <section> 단위로 핵심 역량(스킬 카드 3개), 케이스 스터디(프로젝트 카드 3개), 성과 지표(숫자 강조), 경력 타임라인을 차례로 쌓고, 마지막은 <footer>로 만든 CTA 섹션(연락 버튼)으로 마무리되는 구조로 되어있습니다.

 

* 섹션 단어 해설

히어로 섹션 (Hero section)	페이지 맨 위, 처음 보이는 핵심 영역. 제목과 첫인상을 담당
CTA (Call To Action)	연락하기" 구매하기 같은 행동 유도 버튼/영역
섹션 (Section)	페이지를 구성하는 하나의 단락/구역. 예: 소개 섹션, 스킬 섹션
아이브로우 (Eyebrow)	제목 위에 작게 붙는 카테고리 라벨

// 히어로 섹션은 HTML 태그상으로는 <header>로 구현됨 

 

Chapter 02 내용 정리 

02-1 AI를 깨우는 프롬프트의 비밀

좋은 프롬프트의 조건 : 명확성, 구체성, 맥락 제공을 충족하는 프롬프트.

모호한 프롬프트는 AI의 판단을 흐리게 만들고 기대와 다른 결과물을 초래한다.

 

PRD : Product Requirements Documnet 제품 기획서 

 

기획의 핵심 요소 : 5W1H

목적을 명확히 하고 대상을 정의하며 기능을 구체화하고 사용맥락을 파악하고 구현방법을 결정한다.

 

효과적인 프롬프트를 위한 기본 질문 템플릿

[무엇]을 만들려고 해.

주요 기능은 [구체적인 기능 설명]이야.

[누구]를 위한 것이고,

[왜/어떤 문제를 해결]하기 필요해.

어떻게 구현하면 좋을지 기술적 방향과 함께 구체적인 PRD를 작성해보자.

 

확인문제

1. 다음 중 좋은 프롬프트의 조건이 아닌 것은? 3번 창의성

 

2. 다음 빈칸을 채우세요.

프롬프트와 PRD는 모두 5W1H 원칙을 기반으로 한다. 이 원칙은 Why, Who, WHat, When, Where, How 여섯 가지 질문으로 구성된다.

 

3. 소프트웨어 개발을 위한 PRD에서 특히 강조되어야 하는 두 가지 질문은 무엇인가요?

2. 무엇을(What) 어떻게(How)

 

4. 아래 두 프롬프트 중 더 좋은 것은? 그 이유는 무엇인가요?

2. 오늘의 날짜와 시간, 검색창이 있는 나만의 시작 홈페이지를 만들고 싶어.

좀 더 구체적이고 명확하고 무얼 만들지 명확합니다.

 

02-2 실전! 마케팅 포트폴리오 완성하기

HTML은 섹션으로 이루어진 문서. 소개 영역, 리스트, 연락처 링크등이 모두 별도의 섹션이다.

4단계 포트폴리오 전략 : 1. 뼈대 2. 기능 3. 디자인 4. 점검 순

뼈대 단계에서는 웹페이지에 기능이나 디자인 넣기 전, 기본적인 HTML 구조만으로 틀을 잡는다.

기능 단계에서는 실제 데이터를 채워넣고 동작을 추가한다.

디자인 단계에서 색상, 레이아웃 등 시각적 요소를 적용하여 완성도를 높힌다.

점검 단계에서는 웹페이지를 검토하며 누락된 기능이나 오류를 수정한다.

 

확인문제

1. 포트폴리오 웹사이트를 만들 때 사용한 4단계 전략의 올바른 순서는? 

3. 기본 틀 잡기- -> 핵심 기능 넣기 -> 디자인 입히기 -> 완성도 점검

 

2. 다음 중 효과적인 프롬프트 작성 방법으로 옳지 않은 것은?

2. 모든 기능을 한 번에 요청하여 시간을 절약한다.

 

3. 섹션에 고유한 이름을 붙이면 생기는 장점이 아닌 것은?

4. 자동으로 디자인이 개선된다.