프로젝트 한눈에 보기
자사 개발 인프라 및 퍼블리싱 표준화
쉽게 말하면
프레임워크 구축과 함께 산발적으로 작성되던 화면 구조, SCSS, 컴포넌트 네이밍, 폴더 구조, API 연동, 다국어 처리를 하나의 기준으로 맞춘 표준화 작업입니다. 실무 적용 가능한 예제 페이지와 스타일 가이드도 함께 만들었습니다.
GitHub / Visual Studio Code / Cursor / Figma / Vue 3 / Nuxt 3 / SCSS / JavaScript / TypeScript
01 / PROJECT NOTE
제가 맡고 끝까지 책임진 일
완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.
문제를 이렇게 풀었습니다
- 버튼 / 입력폼 / 셀렉트 / 달력 / 프로그레스 / 차트 / 그리드 / LNB / 레이아웃 구조를 공통화
- 컴포넌트 네이밍 / 폴더 구조 / API 연동 / 다국어 처리 방식을 신규 프로젝트 재사용 가능한 형태로 정리
- SCSS 토큰 / BEM 네이밍 / 컴포넌트 단위 스타일 관리 방식 정립
- 실무 적용 가능한 예제 페이지와 스타일 가이드 제작 / 문서화
그래서 실제로 달라진 점
- 신규 프로젝트 착수 시 기본 레이아웃 / 컴포넌트 / 스타일 가이드를 빠르게 적용할 수 있는 기반 마련
- 산발적이던 UI 구조를 공통화해 퍼블리싱–프론트엔드 협업 생산성 향상 기반 구축
이 프로젝트에서 눈여겨볼 점
- 퍼블리싱 표준화
- 재사용성 / 협업성 향상
- 예제 / 가이드 문서화
02 / SCREENS
화면으로 확인하기
말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.