플러스프로젝트 배경
[문제점] 5년 누적된 인라인 스타일로 페이지마다 톤이 다름 → 같은 사이트 안에서도 마이페이지 / 고객센터 / 결제 화면이 서로 다른 디자인 모바일 미대응 페이지가 다수 존재 → 카드 / 검색 / 카테고리 모두 PC 화면을 축소만 한 형태 관리자 페이지에서 동일 정보가 여러 위치에 분산 → 원격 지원, 데모 URL 같은 옵션이 코드에 하드코딩된 상태 [목표] Toss 톤을 기준으로 전체 사
프로젝트 성과
디자인 시스템 단일화
흩어진 인라인 스타일을 mypg-v2 / board-toss / mypg-board-mobile / program-mobile
4개 모듈로 통합. 신규 페이지 추가 시 동일 토큰만으로 일관 톤 유지.
4개 모듈로 통합. 신규 페이지 추가 시 동일 토큰만으로 일관 톤 유지.
CSS 충돌 구조적 해소
board-toss.css 의 !important 84건을 0건으로 리팩토링. 명시도 (0,0,5,1) 패턴
표준화로 페이지별 충돌도 동일한 방식으로 즉시 해결.
표준화로 페이지별 충돌도 동일한 방식으로 즉시 해결.
모바일 사용자 경험 개선
상품 카드를 이미지·상품명·가격·요약·버튼으로 압축, 카테고리는 가로 스크롤
칩으로 전환. 모바일 한 화면 정보 밀도 향상.
칩으로 전환. 모바일 한 화면 정보 밀도 향상.
운영 정책의 코드 분리
i_remote_is / i_demo_is / i_demo_url 3개 컬럼 신설. 관리자 토글로 운영팀이
코드 수정 없이 노출 정책을 즉시 조정.
코드 수정 없이 노출 정책을 즉시 조정.
클라이언트 사이드 리스트 갱신
정렬·필터 변경 시 fetch + DOMParser 부분 갱신, history.pushState URL 동기화.
전체 새로고침 제거로 즉시 반응 수준 응답.
전체 새로고침 제거로 즉시 반응 수준 응답.
핵심 기능
Toss 톤 통합 디자인 리뉴얼
컬러 #3182f6 / #191f28 기반의 단일 토큰을 정의하고,
카드 / 모달 / 토스트 / 결제 안내까지 동일한 시각 언어로 통일.
카드 / 모달 / 토스트 / 결제 안내까지 동일한 시각 언어로 통일.
진행 단계
[1단계] 디자인 시스템 토큰 정의
2025.01.
컬러 / 라운드 / 그림자 / 폰트 굵기 / 간격을 변수화.
이후 모든 페이지가 동일한 출발점을 공유하도록 _common 모듈 설계 완료.
이후 모든 페이지가 동일한 출발점을 공유하도록 _common 모듈 설계 완료.
프로젝트 상세
[한 줄 소개] 업무 자동화, 마케팅, 데이터 수집, 웹·앱 솔루션을 한 곳에서 판매하는 B2C 디지털 솔루션 마켓플레이스의 사용자 / 관리자 / 모바일 통합 디자인 리뉴얼 프로젝트. [기획 배경] 기존 사이트는 5년 이상 누적된 인라인 스타일, 페이지마다 다른 디자인 톤, 모바일 미대응 페이지가 다수 혼재된 상태였습니다. 특히 마이페이지 / 고객센터 / 상품 상세 페이지가 각각 다른 시기에
