Renetik Music Apps 웹사이트
VuePress, Vue, TypeScript, Vite를 활용해 직접 설계하고 구축한 제품, 문서 및 지원 플랫폼.
Renetik — 독립 제품
제품 디자이너, 웹 디자이너, 콘텐츠 디자이너, 프론트엔드 엔지니어
2021년 3월 – 현재
VuePress 2Vue 3TypeScriptViteNode.js
저는 제공된 디자인을 단순히 구현하는 대신, 전체 애플리케이션 패밀리의 공개 제품 레이어로서 Music Apps 웹사이트를 직접 설계하고 구축했습니다. 시각적 언어, 정보 구조, 네이티브 수준의 페이지 구조, 제품 프레젠테이션, 문서화 접근 방식, 콘텐츠를 모두 직접 만들었습니다.
이 사이트는 Vue 3, TypeScript, Vite, Node.js, Hope 테마, 커스텀 Vue 레이아웃 및 컴포넌트, 맞춤형 SCSS 레이어로 구축된 별도의 VuePress 2 애플리케이션입니다. Markdown과 구조화된 프런트매터를 사용하여 각 페이지를 하드코딩하지 않고도 제품 페이지, 기능 가이드, 튜토리얼, 스크린샷, 리뷰, 스토어 액션을 쉽게 유지관리할 수 있습니다.
최적화된 WebP 미디어, 전체 화면 갤러리, 동영상 지원, 검색, 브레드크럼, 지원 및 개인정보 처리방침 페이지를 통해 이 사이트는 제품 쇼케이스이자 실용적인 사용자 가이드 역할을 모두 수행합니다. 또한 빌드 과정에서 분석, 캐노니컬 URL, 소셜 메타데이터, 사이트맵, 리디렉션, 제품 전용 404 경험까지 처리합니다.
통합된 renetik.com 릴리스에서 /app/ 아래에 생성된 사이트를 통합했습니다. 포트폴리오는 최종 아티팩트를 오케스트레이션하고 검증하는 한편, Music Apps 웹 및 포트폴리오 리포지토리는 독립적인 히스토리를 유지하여 웹사이트 소스를 중복하지 않으면서 경계를 명확하게 분리합니다.
주요 하이라이트
제품 아이덴티티, UX, 반응형 웹 디자인, 정보 구조, 콘텐츠를 직접 제작했습니다.
VuePress 2, Vue 3, TypeScript, Vite, Node.js, 커스텀 Vue 컴포넌트, SCSS.
구조화된 Markdown과 프런트매터(frontmatter)를 통해 재사용 가능한 제품, 기능, 튜토리얼, 지원 페이지를 구동합니다.
최적화된 WebP 갤러리, 동영상, 검색, 탐색, 문서화 및 Google Play 전환 경로.
캐노니컬 SEO, 소셜 미리보기, 분석, 사이트맵, 리디렉션, 개인정보 처리방침 페이지, 커스텀 404 동작.
자동화된 릴리스 검사를 통해 생성된 49개의 HTML 페이지와 통합된 /app/ 배포 계약을 검증합니다.
