프론트엔드 포트폴리오는 화면 캡처보다 문제 해결 과정을 설명해야 합니다. 기존 글의 ‘합격률 35% 상승’ 같은 수치는 확인 가능한 조사 자료가 없어 삭제했습니다. 채용 담당자가 짧은 시간에 프로젝트의 목적, 본인 기여, 실행 방법을 이해할 수 있도록 아래 7개 항목을 점검하세요.
1. 첫 화면에서 프로젝트의 목적을 말하세요
‘쇼핑몰 클론’보다 ‘검색과 장바구니 흐름을 구현한 반응형 상품 탐색 앱’처럼 사용자 문제와 구현 범위를 구체적으로 쓰세요. 실제 서비스 이용자나 성과가 없었다면 만들어 내지 마세요. 학습용 프로젝트라고 명확히 표시해도 좋습니다.
2. 본인 기여와 기술 선택 이유를 분리하세요
팀 프로젝트라면 전체 기능과 자신이 맡은 부분을 구분합니다. React를 썼다는 목록만 적지 말고 상태 관리, 라우팅, 서버 데이터 처리 방식의 선택 이유와 대안을 짧게 설명하세요.
3. 실행 가능한 데모와 저장소를 연결하세요
배포 주소가 작동하는지 모바일에서도 확인합니다. 로그인에 테스트 계정이 필요하면 공개해도 되는 계정만 사용합니다. GitHub README 안내처럼 저장소 첫 화면에 프로젝트의 기능, 실행 방법, 환경 변수 예시, 도움을 받을 경로를 적어 두세요. 비밀값은 저장소에 올리지 않습니다.
4. 접근성과 반응형 화면을 확인하세요
키보드만으로 주요 작업을 끝낼 수 있는지, 폼에 레이블이 있는지, 모바일 너비에서 가로 스크롤이 생기지 않는지 직접 테스트하세요. 단순한 점수보다 실제 사용 흐름의 문제와 수정 전후를 설명하는 편이 좋습니다.
5. 성능은 숫자와 측정 조건을 함께 적으세요
이미지 크기, 초기 로딩, 상호작용 지연을 점검하세요. 성능 수치를 제시한다면 측정 도구, 장치 조건, 측정 날짜를 같이 적어야 비교할 수 있습니다. Google의 LCP 안내는 페이지의 주요 콘텐츠가 표시되는 시간을 이해하는 출발점입니다.
6. 테스트와 오류 처리를 보여주세요
정상 경로뿐 아니라 빈 검색 결과, 네트워크 실패, 잘못된 입력을 처리했는지 확인합니다. 테스트가 있다면 테스트 실행 명령과 범위를 README에 적고, 없다면 어떤 부분이 미검증 상태인지 밝혀 두세요.
7. 면접에서 설명할 수 있는 회고를 남기세요
가장 어려웠던 버그 한 건을 골라 원인, 시도한 방법, 선택한 해결책, 남은 한계를 적습니다. 과장된 ‘합격률’보다 자신의 판단 과정이 드러납니다. 포트폴리오 배포 서비스 비교와 기술면접 준비 자료로 다음 단계를 확인하세요.
수정일: 2026년 9월 27일. 합격률이나 취업 성과를 보장하는 수치는 사용하지 않았습니다.