SoundPress

완료

사운드프레스

진행률100%

Web

2026.03 ~ 2026.04

1명 (퍼블리싱)

프로젝트 설명

음악 유통사의 공식 홈페이지입니다. Figma 디자인 35개 프레임을 픽셀 단위로 검수하여 퍼블리싱했습니다.

Figma MCP 연동으로 전 섹션 수치 검증 및 3회 비교검수
React TypeScript(Vite) 전환 + CSS 모듈화 + 1920px zoom 스케일링
전 22개 HTML 페이지 80건+ 불일치 도출 및 전량 수정

기술 스택

HTML5CSS3Figma MCPResponsive

아키텍처

Figma 디자인 (35 프레임)
  └─ Figma MCP 연동 (수치 자동 추출)
       └─ React TypeScript + Vite
            ├─ Header / Footer / Chatbot 공통 컴포넌트
            ├─ HomePage + 12개 서브 페이지 (TSX)
            ├─ CSS Modules (페이지별 분리)
            └─ 1920px 고정 + zoom 스케일링

Figma MCP(Pro 플랜)로 노드별 정확한 수치를 자동 추출하여 픽셀 단위로 퍼블리싱. HTML 퍼블리싱을 React TypeScript(Vite)로 전환하고, 1920px 고정 레이아웃에 zoom 스케일링을 적용했습니다.

주요 기능

Figma MCP 연동

Figma Pro 플랜의 MCP 서버로 전 섹션의 정확한 px 수치를 자동 추출. 3회 비교검수로 80건+ 불일치 전량 수정

React TS 전환

기존 HTML 퍼블리싱을 React TypeScript(Vite) 프로젝트로 전환. Header/Footer/Chatbot 컴포넌트 분리 + CSS 모듈화

35프레임 퍼블리싱

메인/아티스트/요금제/ABOUT/PRESS/마이페이지 등 35개 Figma 프레임을 픽셀 퍼펙트 퍼블리싱

다국어 대응

국문/영문 페이지 분리 + ellipsis 유틸리티로 텍스트 오버플로우 처리

zoom 스케일링

1920px 고정 레이아웃 기반 window.innerWidth/1920 비율 자동 축소

기능

#35개 프레임 퍼블리싱#Figma MCP 연동#다국어 대응#반응형 3단계#13개 신규 페이지

링크

사이트 방문