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

커서AI에게 원페이지 구조, 소개 문구 한 줄, CTA 두 개, 배경 이미지에 오버레이 적용을 지시하자 초안이 바로 생성됐습니다. 생성된 마크업을 커서 편집기에서 열어 폰트 크기와 버튼 모양, 오버레이 투명도를 제가 원하는 값으로 수정했습니다. 실제 작업 화면은 아래 사진처럼 VS Code 스타일의 커서 에디터에서 컴포넌트를 나눠 관리했고, 제품 전체 사진 - 확대샷 - 그 외 사진 흐름으로 시각 자료를 배치했습니다.

성능과 접근성은 CSS 변수·반응형으로 해결

커서AI가 생성한 기본 CSS를 바탕으로 다크·라이트 테마 변수를 정리하고, 모바일 퍼스트 그리드로 재배치했습니다. 버튼 대비와 포커스 스타일은 커서 챗에 “키보드 탐색 강화”라고 요청해 초안을 받고, 제가 색상 대비를 다시 조정해 완성했습니다. 코드 편집 화면을 보면 토큰화와 미디어 쿼리가 깔끔히 나뉘어 유지보수가 쉬웠고, 작은 화면에서도 정보 흐름이 끊기지 않았습니다.

깃허브로 배포·이력 추적까지 한 번에

커서 내에서 깃허브 계정을 연동하고, 저장소를 만들어 main 브랜치로 푸시 후 Pages를 활성화하니 공개가 끝났습니다. 커밋 메시지는 feat, fix, docs 접두어로 일관되게 남겼고, 커서의 Git 패널에서 변경 파일을 확인하며 커밋 흐름을 관리했습니다. GitHub Actions로 빌드 검증을 붙여 오류를 빠르게 잡았고, 스크립트는 이벤트 위임과 디바운스로 불필요한 호출을 줄여 로딩을 가볍게 유지했습니다. 메타 태그와 오픈그래프, 파비콘은 커서AI에게 초안을 생성받아 제 사이트 정보에 맞게 수정했습니다.

실사용 소감은 명확합니다. 커서AI로 초안을 빠르게 생성하고, 필요한 부분만 직접 코딩해 다듬는 하이브리드 방식이 가장 현실적이었습니다. 포트폴리오 업데이트는 이미지와 설명을 추가해 커서에서 커밋만 하면 곧바로 깃허브 Pages에 반영됩니다. 핵심은 이미지 최적화, 메타 태그 점검, 연락처 폼의 개인정보 동의 체크박스입니다. 이 세 가지만 챙기면 방문자가 필요한 정보를 한 번에 파악합니다. 포트폴리오와 깃허브 링크는 상단과 하단에 중복 배치해 이동 경로를 줄였고, 커밋 이력은 꾸준함을 보여주는 지표여서 짧게라도 자주 남기니 효과가 컸습니다.

웹사이트는 결국 나를 설명하는 간판이라는 사실을 다시 느꼈습니다. 디자인은 단정하게, 내용은 역할과 결과 위주로, 제작은 커서AI와 수동 편집의 조합으로, 배포는 깃허브 Pages로 가볍게. 이 흐름으로 비용 없이 빠르게 시작했고, 유지와 확장이 쉬웠습니다. 처음 웹사이트를 만드는 분들께 같은 방식의 실습을 추천드립니다.

#해시태그 #웹사이트 #나만의포트폴리오웹사이트만들기 #포트폴리오웹사이트 #깃허브Pages배포 #github포트폴리오 #프론트엔드포트폴리오 #원페이지웹사이트 #반응형웹포트폴리오 #커밋전략 #개발자개인사이트