Client Work
9HzBOLT 포트폴리오
영상 및 음악 제작을 전문으로 하는 9HzBOLT님의 포트폴리오 웹사이트를 제작했습니다.
- 클라이언트
- 9HzBOLT
- 담당
- 정보 설계, 디자인, 프론트엔드 개발
- 제작 기간
- 2026.07(5日)
- 사용 도구
- Figma, Codex(HTML, CSS, JavaScript, PHP, SQLite)
아티스트 본인을 상징하는 ‘볼트’를 디자인 모티프로 삼아 사이트의 비주얼과 인터랙션을 설계했습니다. 작품 목록은 볼트를 중심축으로 한 입체적인 구조로 구성했으며, 스크롤이나 드래그를 통해 작품이 회전하도록 구현했습니다. 여기에 인더스트리얼한 타이포그래피와 모션 효과를 더해 아티스트만의 개성을 표현하는 동시에, 각 작품을 직관적이고 몰입감 있게 감상할 수 있도록 디자인했습니다.
운영 측면에서는 전문적인 지식이 없어도 작품을 추가·수정하고 순서를 변경할 수 있도록 독자적인 CMS를 개발했습니다. 업로드한 이미지는 자동으로 크기가 조정되고 WebP 형식으로 변환되어, 사이트 업데이트에 필요한 작업을 줄이면서도 빠른 로딩 속도를 유지할 수 있도록 했습니다.
또한 검색 엔진뿐만 아니라 생성형 AI도 사이트의 정보를 정확히 이해할 수 있도록 구조화 데이터와 `llms.txt` 등을 활용한 AIO 및 SEO 대책을 적용했습니다. 입력값 검증과 관리자 페이지 보호 등의 보안 대책도 마련했으며, 키보드 조작 및 스크린 리더 지원, 이미지와 영상의 지연 로딩 등을 통해 접근성과 성능까지 세심하게 고려했습니다.
시각적인 완성도뿐만 아니라 공개 이후의 운영 편의성, 보안, 성능, 그리고 정보 전달력까지 종합적으로 설계한 포트폴리오 사이트입니다.
사이트 보기 ↗ 운영 측면에서는 전문적인 지식이 없어도 작품을 추가·수정하고 순서를 변경할 수 있도록 독자적인 CMS를 개발했습니다. 업로드한 이미지는 자동으로 크기가 조정되고 WebP 형식으로 변환되어, 사이트 업데이트에 필요한 작업을 줄이면서도 빠른 로딩 속도를 유지할 수 있도록 했습니다.
또한 검색 엔진뿐만 아니라 생성형 AI도 사이트의 정보를 정확히 이해할 수 있도록 구조화 데이터와 `llms.txt` 등을 활용한 AIO 및 SEO 대책을 적용했습니다. 입력값 검증과 관리자 페이지 보호 등의 보안 대책도 마련했으며, 키보드 조작 및 스크린 리더 지원, 이미지와 영상의 지연 로딩 등을 통해 접근성과 성능까지 세심하게 고려했습니다.
시각적인 완성도뿐만 아니라 공개 이후의 운영 편의성, 보안, 성능, 그리고 정보 전달력까지 종합적으로 설계한 포트폴리오 사이트입니다.