콘텐츠 풍성하게 만들기 — 이미지·아이콘·섹션 추가
이미지 삽입부터 아이콘, 프로젝트 카드·FAQ 섹션까지 자연어 한 줄로 페이지를 풍성하게 채우는 방법을 익혀요.
이 챕터를 끝내면 텍스트만 있던 페이지에 이미지·아이콘·새 섹션을 추가해 실제 포트폴리오처럼 보이는 결과물을 만들 수 있어요.
이미지 넣기 — 로컬 파일 vs 무료 이미지
이미지를 넣는 방법은 두 가지예요.
① 내 파일 직접 사용 프로필 사진이나 작업물 스크린샷이 있다면 Codex 앱의 프로젝트 영역으로 파일을 끌어다 놓고, 아래처럼 요청하세요.
profile.jpg 파일을 헤더 섹션 이름 옆에 원형 프로필 사진으로 넣어줘. 크기는 120×120px 정도로.
② 무료 이미지 URL 활용
Unsplash(unsplash.com)나 Pexels(pexels.com)에서 원하는 이미지를 찾으면 URL을 복사해서 Codex에 전달할 수 있어요. URL 가져오는 순서는 이래요.
- Unsplash에서 원하는 사진을 클릭해 상세 화면을 열어요.
- 사진 위에서 마우스 우클릭 → '이미지 주소 복사' (영문 브라우저면
Copy image address)를 눌러요. - 복사된 주소를 Codex 메시지에 그대로 붙여넣고, 어떻게 쓸지 함께 적어요.
[여기에 복사한 이미지 URL을 붙여넣기] 이 이미지를 히어로 섹션 배경으로 넣어줘.
텍스트가 잘 보이도록 어두운 오버레이도 추가해줘.
💡 Pexels는 다운로드 버튼 옆 화살표를 눌러 원하는 사이즈를 선택한 뒤 이미지 주소를 복사하면 돼요.
아이콘 추가하기
아이콘은 별도 파일 없이 무료 라이브러리를 연결해서 쓸 수 있어요. Font Awesome이나 Heroicons처럼 널리 쓰이는 라이브러리를 Codex가 알아서 CDN으로 불러와요. 라이브러리 설치·설정은 학습자가 직접 만질 일이 없어요.
페이지 아래쪽에 연락처 영역을 만들어 이메일·GitHub·LinkedIn으로 연결되는 아이콘 버튼을 넣어 볼게요.
연락처 섹션에 이메일·GitHub·LinkedIn 아이콘을 Font Awesome으로 넣어줘.
아이콘을 클릭하면 각 링크로 이동하게 해줘.
Codex는 연락처 섹션을 새로 만들고 세 아이콘을 가로로 정렬해 줘요. GitHub·LinkedIn 주소를 따로 알려주지 않으면 placeholder 링크로 채우고 "실제 계정 주소를 알려주면 바로 바꿔드릴게요" 같은 안내가 따라와요. 그때 자기 GitHub/LinkedIn URL을 한 줄로 알려주면 돼요.
아이콘 스타일이 페이지 톤과 안 어울리면 바로 이어서 수정 요청하면 돼요.
방금 추가한 아이콘들 색을 강조색과 맞춰주고, 크기도 조금 더 키워줘.
색만 맞추는 게 아니라 마우스를 올렸을 때 hover 색상까지 자연스럽게 반응하도록 함께 정리해 줘요.
새 섹션 추가하기 — 프로젝트 카드·FAQ
페이지에 섹션을 통째로 추가하는 것도 자연어 한 줄이면 충분해요.
프로젝트 카드 섹션
이전 챕터에서 본문 너비를 좁은 칼럼 형태로 잡아뒀기 때문에 카드를 가로로 나열하면 칸이 좁아 깨져요. 카드는 세로로 쌓는 형태로 부탁해요. 썸네일 이미지 자리도 빼요(나중에 채울 계획이 없는 placeholder는 안 넣는 게 깔끔해요).
'프로젝트' 섹션을 새로 만들어줘. 카드 3개를 세로로 쌓아주고,
각 카드에는 프로젝트 이름·한 줄 설명·'자세히 보기' 링크만 들어가게 해줘.
이미지나 썸네일 자리는 만들지 말고, 텍스트 위주로 깔끔하게.
FAQ 섹션
페이지 하단에 FAQ 섹션을 추가해줘. 질문을 클릭하면 답변이 펼쳐지는 아코디언 형태로 만들어줘.
질문 3개는 내가 나중에 수정할 수 있게 placeholder 텍스트로 넣어줘.
섹션 순서를 바꾸고 싶을 때도 간단히 말하면 돼요.
'프로젝트' 섹션을 자기소개 문단 바로 아래로 옮겨줘.
빠르게 쓸 수 있는 추가 패턴
- 기술 스택 뱃지:
'기술 스택' 섹션을 만들어 사용 기술 이름을 알약 모양 뱃지로 나열해줘 - 구분선·여백 조정:
섹션 사이 여백을 더 넓혀주고 얇은 구분선을 추가해줘 - 배경 톤 변경:
FAQ 섹션 배경을 연한 크림색으로 살짝 톤만 다르게 해줘 - 이미지 교체:
이메일 위 프로필 사진을 내가 방금 드래그한 work1.png로 바꿔줘
페이지가 한층 풍성해졌어요. 이제 마지막 마무리만 남았어요. 다음 챕터에서는 브라우저 탭에 표시되는 페이지 제목과 파비콘(탭 아이콘)을 즉시 적용하고, 나중에 인터넷에 올렸을 때 카카오톡·슬랙 미리보기 카드가 자동으로 잘 뜨도록 OG 메타까지 미리 심어둬서 작품 마무리를 해요.