나만의 포트폴리오 웹 사이트 만들기

처음 한 일은 콘텐츠 기획입니다. 소개, 프로젝트, 연락처 섹션을 꼭 넣고, 각 프로젝트는 역할과 사용 기술, 결과 링크를 명확히 적었습니다. 특히 챌린지에서 만든 실습 예제(프롬프트 실험, 커서 단축키 활용, 소규모 자동화 스크립트 등)는 학습 포인트와 배운 개념을 한 문장으로 요약해 카드에 넣었습니다. 디자인은 밝은 색과 굵은 글꼴을 기반으로 미니멀하게 정리했어요. 아래는 완성된 랜딩 섹션 모습입니다.

웹사이트 빌더+코드 편집 혼합 사용

템플릿으로 뼈대를 잡고 세밀한 효과는 HTML, CSS, JavaScript로 다듬었습니다. 프로젝트 카드를 가볍게 만들고 접근성 라벨을 추가하니 체감 성능이 좋아졌습니다. 실제 사용하며 느낀 점은 1) 반응형 세팅을 초기에 끝내면 수정이 적다 2) 이미지 최적화만 해도 로딩이 확 줄어든다 3) 깃허브 Actions로 자동 배포하면 유지가 편하다는 것. 여기에 챌린지 실습과 연결해, 코드 블록에 커서에서 작성한 스니펫과 실행 스텝을 간단히 첨부했고, 예제별 프롬프트와 결과 스크린샷도 정리했습니다. 아래는 프로젝트 리스트 섹션 상세입니다.

portfolio 핵심: 깃허브와 배포, 폼 주의

코드는 깃허브에 공개 저장소로 관리하고, GitHub Pages로 무료 배포했습니다. 커스텀 도메인을 연결해 웹사이트 신뢰도도 높였고요. 연락 폼은 스팸 방지를 위해 캡차와 서버리스 함수 검증을 넣었습니다. 폼 UI는 단순하지만 필수 동의 체크와 에러 메시지를 명확히 했습니다. 덧붙여 챌린지 진행 현황을 이슈 보드로 관리해, 실습 완료 체크리스트와 다음 실험 아이디어를 티켓으로 남기니 학습 흐름이 선명해졌습니다. 아래는 폼 화면입니다.

실사용 결과, 웹사이트는 실습 기록을 구조화하고 피드백을 받는 채널로 가장 효과적이었습니다. 각 예제의 목표-실행-결과가 한눈에 보여 토론이 구체적으로 바뀌었고, 수정도 깃으로 바로 반영돼 부담이 적었습니다. 만들기 난이도는 낮추고 완성도는 높이고 싶다면, 템플릿+경량 코드 조합과 깃허브 배포를 권합니다. portfolio를 계속 업데이트할 계획이며, 챌린지에서 새 실습을 마칠 때마다 웹사이트에 바로 추가하고 있습니다. 깃허브 이슈로 개선 항목을 적어두니 관리가 쉬웠습니다.

#웹사이트 #나만의포트폴리오웹사이트만들기 #포트폴리오 #만들기 #portfolio #깃허브 #포트폴리오웹사이트템플릿 #개발자포트폴리오 #GithubPages배포 #포트폴리오연락폼