생성된 문서 · 직접 고치지 않는다
실제 화면을 짤 때 참고하는 문서다. 값(색·크기)은 토큰 문서와 같은 곳(src/index.css)에서 온다.
아래 미리보기는 구조·비율·토큰 값만 옮긴 것이다. 실제 셸 코드가 아니다 — 카드를 누르면 그 셸이 뽑힌 원본 와이어프레임이 열린다
좌 브랜드 패널 + 우 폼. 구조는 고정이고 헤드라인·설명·각주만 받는다.
와이어프레임 열기 →상단바(브랜드·기수 선택기·사용자) + 좌측 네비 184px + 콘텐츠. 총괄 전용 항목을 가린다.
와이어프레임 열기 →왜 셸을 먼저 만들었나
확정 화면 17개에서 무엇이 가장 많이 반복되는지 세어봤더니 개별 컴포넌트가 아니라 셸이었다(레이아웃 골격 9회, 네비·콘텐츠 9회, 상단바 8회). 둘이 나눠 개발하면 각자 셸을 만들게 되고, 그러면 가장 크고 가장 많이 쓰이는 것을 두 벌 갖게 된다.
페이지 제목·주액션은 왜 셸이 안 받나
화면마다 탭이 끼거나 제목 옆에 총개수가 붙는 등 조합이 달라서, 셸이 다 받으면 props가 계속 늘어난다. 별도 컴포넌트로 둔다.
위 미리보기는 실제 셸 코드인가
아니다. 구조·비율·토큰 값만 옮긴 것이다. 실제 마크업을 그대로 박으면 셸이 바뀔 때마다 이 문서를 다시 만들어야 하는데, 그 동기화를 사람이 기억해야 한다면 결국 낡는다. 그래서 카드를 원본 와이어프레임으로 가는 링크로 두었다 — 진짜 화면은 거기서 실행 중인 앱으로 본다.
확정 화면 17개에서 5회 이상 반복되는 것만 만들었다. 아래는 실제로 렌더된 모습이다
주 액션은 한 화면에 하나가 원칙이다. 비활성은 disabled 속성으로 준다 — 회색으로 보이게만 하면 보조기술에는 누를 수 있는 버튼으로 읽힌다
색만으로 상태를 말하지 않는다. 배지 안의 글자가 상태를 그대로 말해야 한다 — 색을 구분하기 어려운 사용자에게는 색이 아무 정보도 주지 않는다
안쪽 여백을 기본값으로 두지 않는다 — 표를 담는 카드는 여백이 0이어야 하고 폼을 담는 카드는 필요하다. 기본값을 정하면 절반은 그걸 지우는 데 쓴다
배치만 만들었다. 컬럼 정의와 데이터 연결은 없다 — 화면마다 컬럼이 다르고, 한 화면만 보고 그 형태를 정하면 두 번째 화면에서 틀린다
교육생 › 7기
1–20 / 48명
툴바는 전부 왼쪽, 오른쪽은 비운다. 주 액션은 제목 줄에 있으므로 툴바 오른쪽에도 버튼을 두면 주 액션이 둘로 보인다. 푸터는 범위 개수(왼쪽) · 페이지 이동(가운데) · 오른쪽 비움.
왜 미리 다 만들어두지 않나
화면 하나만 보고 뽑은 컴포넌트는 두 번째 화면에서 대개 틀린다. 같은 조각이 세 번 반복되는 것을 확인한 뒤에 뽑는다. 지금 만드는 것들은 확정 화면 17개에서 5회 이상 반복되는 것만 고른 것이다.
필요한 컴포넌트가 없으면
내 도메인 폴더 안에 만든다(features/{도메인}/components). 다른 도메인에서도 같은 것이 필요해지면 그때 공용으로 올린다. 처음부터 공용으로 만들면 한 곳의 사정에 맞춘 것이 공용이 된다.
Modal · Tabs · Search · Select는 아직 이름과 위치만 합의된 상태다 — 필요한 사람이 만들고 여기 추가한다.