개발자 포트폴리오 사이트의 홈·목록·상세 페이지는 어떤 목적에 맞춰 구성하나요?
포트폴리오 사이트를 화려한 개인 홈페이지가 아니라 프로젝트 근거를 빠르게 탐색하는 정보 구조로 설계합니다.
적용 조건·범위: 아래는 작성 방법을 보여 주는 가상 완성 문서입니다. 실제 독자의 실행·취업·협업 이력을 증명하지 않습니다. TaskFlow는 개인·학습 프로젝트이며 본인이 수행한 체크포인트와 저장소 상태만 반영하세요. 예시의 미확인은 작성 누락이 아니라 확인되지 않은 사실을 표시한 완성 상태입니다.
공식 문서 참고: MIT: 프로젝트를 쉽게 탐색하고 기술 기여를 읽게 하는 포트폴리오
포트폴리오 사이트를 화려한 개인 홈페이지가 아니라 프로젝트 근거를 빠르게 탐색하는 정보 구조로 설계합니다.
커리어·포트폴리오 · 9 / 19
개발자 포트폴리오 사이트 구성: 홈 · 프로젝트 목록 · 상세 페이지
상단에서는 이 주제의 판단 기준을 가상 사례와 완성 예시로 연습합니다. 이전 회차의 문서는 필요 없습니다. 하단의 TaskFlow 누적 적용에서는 같은 기준으로 자신의 포트폴리오 자료를 이어서 만듭니다. TaskFlow는 학습용 프로젝트 사례이며 예시 경력·성과를 자신의 사실로 사용하지 않습니다.
이번 글에서 배우는 내용
- 홈의 역할
- 대표 프로젝트 우선순위
- 프로젝트 목록과 상세 역할 분리
- 기술 스택보다 문제·역할·결과를 먼저 보여 주는 구조
- live / GitHub / case study 링크 배치
- 모바일 탐색
- 접근성
- 이미지 캡션과 근거 표시
- 연락/지원 정보
- 과한 애니메이션과 로딩 연출을 피하는 기준
선수 지식
프로젝트 소개와 근거 자료의 차이를 알면 됩니다. 사이트를 새로 구현하지 않고 문서나 종이에 화면 구성을 설계하는 실습입니다.
목차
홈·목록·상세의 질문을 나누기
홈은 어떤 역할을 지향하며 무엇을 먼저 볼지, 프로젝트 목록은 무엇을 골라 볼지, 상세 페이지는 왜 그렇게 구현했는지 답합니다. 세 페이지에 같은 기능 목록을 반복하지 않습니다.
홈에는 한 줄 소개·대표 프로젝트·개인 또는 경력 구분·연락 경로를 둡니다. 목록 카드에는 문제·역할·현재 상태를 짧게 쓰고, 상세에는 문제·제약·대안·구현·검증·한계를 연결합니다. Live·GitHub·Case study는 서로 다른 근거이며 없는 URL은 버튼으로 만들지 않습니다.
모바일에서도 제목·본문·근거 링크의 순서가 유지되고 키보드로 링크를 찾을 수 있어야 합니다. 이미지 캡션에는 무엇을 어느 상태에서 보여 주는지 적고 장식 이미지에 성과 의미를 부여하지 않습니다. 연락 정보는 지원자가 공개할 범위만 사용합니다. 화려한 전환이 핵심 설명을 늦추면 줄입니다.
독립 실습과 완성 예시
홈의 대부분이 애니메이션이고 프로젝트 카드는 기술 아이콘만 보여 준다고 가정합니다. 방문자가 ‘무엇을 직접 했는가’를 알 수 있도록 홈·카드·상세의 첫 문장을 다르게 작성하세요.
풀이와 판단 근거
| 위치 | 완성 문구의 가상 예시 |
|---|---|
| 홈 | 개인 프로젝트에서 화면 문제를 재현하고 수정 근거를 기록하는 프론트엔드 학습자입니다. |
| 목록 카드 | TaskFlow 입력 폼: 좁은 화면의 버튼 넘침을 CSS 배치 변경으로 다룬 개인 학습 사례 |
| 상세 시작 | 가상 E-DEMO-01에서는 390px에서 버튼이 잘리는 문제를 확인하고, 좁은 폭의 세로 배치를 선택했습니다. 같은 브라우저의 390px·1280px에서 재확인한 범위만 결과로 적습니다. |
카드는 상세와 같은 문단을 복사하지 않고 핵심 질문을 요약합니다. 독립 학습에서는 자신의 다른 프로젝트로 같은 구조를 만들면 됩니다.
자주 발생하는 문제와 해결
- 첫 화면이 자기소개 애니메이션에 치우침
- 기술 아이콘만 많음
- 프로젝트 상세가 카드 설명과 동일
- 모바일에서 근거 링크가 찾기 어려움
개인 프로젝트와 실무 경험은 분리합니다. 팀 작업은 내가 맡은 범위와 팀 전체 결과를 따로 쓰고, 근거가 없는 수치·기간·실행 결과는 추가하지 않습니다. 비공개 자료는 익명화만으로 공개 권한이 생기지 않으므로 허용 범위를 먼저 확인합니다.
학습 완료 체크리스트
- 홈·목록·상세가 서로 다른 질문에 답합니다.
- 개인 역할과 증거가 기술 아이콘보다 먼저 보입니다.
- 없는 demo와 미확인 공개 링크를 만들지 않았습니다.
선택 실습: 포트폴리오 문서 이어 만들기
이 선택 연습은 TaskFlow 개발 경험을 이력서·포트폴리오 자료로 정리하는 과정입니다. 예시 경험은 자신의 실제 근거로 바꿔 작성합니다.
이번에는 career/portfolio-structure.md 문서를 작성·보완합니다.
TaskFlow 누적 적용
시작 방법: 과정대로 이어가는 독자는 이전 글: 취업용 GitHub 정리: Profile README · 저장소 README · pinned repository의 기록을 유지하고 이번 문서를 추가·보완합니다. 이번 결과물은 career/portfolio-structure.md입니다. 중간부터 읽는다면 아래 작성 표와 완성 예시를 새 문서에 옮겨 현재 보유한 자료부터 연결합니다. 없는 근거나 미작성 문서는 그대로 표시하며, 이전 과정을 이수한 것처럼 채우지 않습니다.
이전 체크포인트: career-step-08-github. 직전 문서 career/github-readmes.md와 앞선 자료를 유지합니다.
현재 결과물 상태: 앞선 8편의 career 문서를 보관한 상태에서 이번 문서를 추가합니다. 기존 파일은 유지하며 이번 추가·수정 파일은 career/portfolio-structure.md입니다. 중간부터 읽는 독자는 위 독립 예시로 작성법을 익힌 뒤 직전 문서의 필요한 사실을 가져오면 됩니다.
아래는 작성 방법을 보여 주는 가상 완성 문서입니다. 실제 독자의 실행·취업·협업 이력을 증명하지 않습니다. TaskFlow는 개인·학습 프로젝트이며 본인이 수행한 체크포인트와 저장소 상태만 반영하세요. 예시의 미확인은 작성 누락이 아니라 확인되지 않은 사실을 표시한 완성 상태입니다.
Before → 적용 → After
Before: TaskFlow 상세 화면에 React·Next.js·상태 관리 아이콘만 모은다.
적용: 관련 사실과 근거 범위를 대조하고, 이번 회차의 기준으로 문장을 수정합니다.
After: 프로젝트 유형, 입력 폼의 문제, 직접 바꾼 CSS 배치, 확인한 두 폭, 미확인 환경을 우선 배치한다. E-DEMO-01은 가상 문서 연습임을 표시한다.
전체 파일·코드 보기
career/portfolio-structure.md
# 포트폴리오 구조 — 가상 작성 예시
Home: 개인 학습 소개 → TaskFlow 대표 카드 → 학습 분야 → 공개할 연락 경로
Project List: 프로젝트 이름 / 개인 학습 / 해결 문제 / 문서 작성 상태
TaskFlow Detail:
1. 입력 폼의 좁은 화면 넘침
2. 본인 역할과 기존 기능 유지 제약
3. 한 줄 축소안과 세로 배치안 비교
4. 좁은 폭 CSS 수정
5. E-DEMO-01 가상 증거, 같은 브라우저 390px·1280px
6. 다른 브라우저·보조기술 미확인
근거 연결: case-study.md, evidence-log.md
외부 링크: 실제 공개 주소 확인 전에는 제공하지 않음
공개 전 점검: 모바일 순서·키보드 링크 이동·캡션·연락 정보 범위
결과 확인
저장한 문서를 다시 열고 위 학습 완료 체크리스트를 적용합니다. 이전 문서의 프로젝트 유형·역할·검증 상태와 충돌하면 사실 원본부터 수정합니다. 예시 문장의 작성 완료와 실제 프로젝트 검증 완료는 다른 상태입니다.
직접 작성할 결과물: career/portfolio-structure.md 3개 화면 구성표
질문: 홈에서 대표 프로젝트 상세까지 두 번 이내에 찾을 수 있나요?
작성 예시(가상): 홈: 역할과 대표 사례. 목록: 프로젝트 유형·기여·기술. 상세: 문제·선택·증거·한계. 실제 배포하지 않은 URL은 샘플 링크로 표시하지 않습니다.
스스로 점검: 내비게이션의 각 링크가 실제 목적지로 열리는지, 모바일 폭에서 제목이 잘리지 않는지, 데모·저장소·케이스 스터디 내용이 서로 같은지 확인합니다.
다음 학습: 10편에서는 상세 페이지의 검증 가능한 한 문장을 이력서 성과 문장으로 줄입니다.
완료 체크포인트
career-step-09-portfolio-site
다음 학습
10편 「프론트엔드 이력서 작성법: 프로젝트 경험을 성과로 쓰는 기준」로 이어집니다. 이번 문서의 사실과 미확인 항목을 다음 회차 입력으로 사용합니다.
이 글이 도움이 되었나요?
읽음 기록
읽음 — / 전체 19개 · 필수 19개
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.