교육공간 · SolBridge
디자인코드반응형
기능을 찾아 헤매던 화면을 5개 역할 중심 구조로 다시 세웠습니다
- 문제
- 기능을 쓸 때마다 그 기능이 어디 있는지부터 찾아야 했습니다. 원인은 색이 아니라 구조였습니다.
- 결정
- 비주얼 교체 대신 구조 재설계. 기능이 빠질 위험은 기존 기능 명세 470개를 먼저 뽑아 기준선으로 막았습니다.
- 결과
- 5개 역할 53페이지 · 공통 컴포넌트 225개. 기능 누락 QA 0건 · 교체 뒤 기능 위치 문의 0건.
녹화PC 폭(1440px)에서 실제 사이트를 녹화한 영상입니다.
데모 사이트를 역할과 기기별로 그대로 열었습니다. 같은 역할이 PC에서는 사이드 내비였다가 모바일에서는 하단 탭바로 바뀌고 표는 카드 목록으로 재배치됩니다.
평면도 · 정보구조
문제
기능을 쓸 때마다 그 기능이 어디 있는지 다시 찾아야 했습니다. 원인은 색이나 컴포넌트가 아니라 기본 UI 관례를 지키지 않은 구조였습니다. 비주얼만 바꿔서는 풀리지 않는 문제였습니다.
대안 검토
- 비주얼만 교체작업량은 가장 적지만 탐색 문제가 그대로 남습니다.
- 구조 재설계탐색 문제는 풀리지만 기능이 소리 없이 빠질 위험이 생깁니다.선택
구조 재설계를 택했습니다. 그 위험을 막으려고 시작하기 전에 기존 기능 명세 470개를 모두 뽑아 재설계의 기준선으로 삼았습니다.
실행
학생 · 강사 · 기관 관리자 · 마스터 관리자 · 인증까지 5개 역할의 53페이지를 역할 중심 정보구조로 다시 짰습니다. 페이지 구성과 페이지네이션도 새로 정했습니다.
공통 컴포넌트 225개로 라이브러리를 만들었습니다. Button · Field · Tab · Badge · Alert · Toast · Avatar · File upload를 variant 세트로 두고 테이블 행은 열 폭 명세를 variant로 갖게 했습니다.
상태와 접근성
첫 로딩 · 첫 실패 · 기존 값 유지 · 빈 목록 · 조회 실패 같은 데이터 상태와 복구 흐름을 섹션 단위로 명세했습니다.
좁은 화면과 키보드 동선부터 권한 · 동의 흐름과 법률 문서 국문 · 영문까지 포함했고 WCAG AA 명도 대비 18쌍이 모두 통과한 감사 기록을 남겼습니다.
디자인과 코드 연결
원시 · 의미 2계층 Figma 변수와 CSS 변수의 이름을 맞췄습니다. Figma MCP를 양방향으로 써서 에이전트가 Figma에 시안을 만들게 하고 승인된 시안을 코드로 옮겼습니다.
결과
- 기능 누락 QA 0건 (AI 투입 3차 QA 포함)
- 전면 교체 뒤 기능 위치 문의 0건