#22 #포트폴리오 준비(2)

서영·2025년 11월 27일

#끄적끄적

목록 보기
4/4
post-thumbnail

학교 테크폴리오 공모전 참가를 위한 웹사이트 형식 포트폴리오 제작 과정을 기록합니다. 디자인 능력이 미숙한 점을 인지하고, 프론트엔드 개발자 포트폴리오를 레퍼런스 삼아 개발자의 성장 과정과 기술 활용 능력을 나타내는 데 중점을 두었습니다.

1. 와이어프레임 및 구조 설계

송진경 개발자의 포트폴리오를 기반으로 하여, 학생으로서의 기술 숙련도학습 기록을 강조하는 방향으로 수정했습니다. 포트폴리오는 방문자가 정보를 단계적으로 파악할 수 있도록 7개의 섹션으로 구성되었습니다.

섹션목적 및 포함 내용강조 사항
Header첫 화면 및 자기소개 요약My Vibe 제시
About Me인적 사항, 흥미 및 핵심 역량간결한 정보 전달
Skills보유 기술 스택 및 숙련도기술에 대한 이해도 표현
Projects주요 프로젝트 경험문제 해결 과정 위주 서술
Velog최신 학습 및 기술 기록지속적인 학습 태도 입증 (핵심)
Education학업 배경, 수상 및 자격증객관적인 성과 제시
Contact연락 정보 및 소셜 미디어 링크접근성 확보

이 중 Velog 섹션은 개인의 활발한 학습 기록을 포트폴리오에 직접적으로 노출하여, 학습에 대한 진정성을 보여주기 위한 핵심 기능으로 설정되었습니다.

2. 기술 구현 중점 사항

A. Velog 게시글 연동

  • 목표: 작성된 벨로그 글 목록을 포트폴리오 페이지에 직접 가져와 실시간으로 보여주는 기능 구현.
  • 배경: 단순히 링크를 연결하는 것을 넘어, 많은 학습 기록이 담긴 벨로그 내용을 통해 지속적인 자기 계발 노력을 강조하기 위함.
  • 구현: Velog의 API 또는 RSS 피드 파싱 방식을 활용하여, 비동기 통신을 통해 최신 게시글 데이터를 불러와 카드 형태로 렌더링했습니다.

B. GitHub Pages를 통한 배포

  • 목표: 포트폴리오 배포 과정을 직접 경험하고, Git/GitHub 활용 능력을 버전 관리 외 배포까지 확장하는 것.
  • 배경: 협업에 필수적인 Git/GitHub 활용을 완벽히 습득하기 위해 배포 환경 구축까지 진행.
  • 구현: GitHub Pages를 이용해 소스 코드를 웹사이트로 배포하는 절차를 따랐으며, 이 과정은 향후 협업 시 CI/CD 환경에 대한 이해도를 높이는 데 기여했습니다.

3. 프로젝트를 통한 발견 및 결론

이번 포트폴리오 제작을 통해 가장 크게 체감한 것은 기록의 중요성이었습니다.

  • 개인의 경험: 평소 노션(Notion)에 프로젝트 기획, 사소한 결정, 파일, 수상 기록 등 모든 것을 습관적으로 기록해 두었습니다.
  • 결과: 포트폴리오 제작 시작 단계에서 자료를 찾는 데 시간을 허비하지 않고, 바로 개발에 착수할 수 있었습니다. 이는 다른 참여자들이 자료 수집에 시간을 쏟는 것과 대비되는 부분이었으며, 웹사이트 개발이라는 보다 높은 수준의 목표를 달성할 수 있는 기반이 되었습니다.

결론적으로, 웹 포트폴리오는 단순한 성과 나열을 넘어, 개발자로서의 학습 태도와 기록 습관을 입증하는 결과물이 되었습니다. 앞으로도 지속적인 업데이트를 통해 포트폴리오의 내용과 기능을 발전시켜 나갈 계획입니다.


완성 웹사이트 링크 : https://dayeon-t.github.io/website_portfolio/#intro

1개의 댓글

comment-user-thumbnail
3일 전

와 대박슨 대박 대단슨 이건 경악할수밖에없는포트폴리옫 대박슨!!

답글 달기