2. 디자인 의도와 빈자리

2.1 UX 메모와 GUI 화면이 어긋나면 구현 전에 질문합니다

어긋난 두 디자인 중 하나를 말없이 골라 구현했다가 되돌리는 비용을 막습니다.

UX 메모와 GUI 화면은 따로 고쳐지므로 한쪽만 최신인 일이 흔합니다. 메타데이터 한 번에 메모와 화면이 함께 오므로, 어긋난 지점을 찾아 구현 전에 묻습니다.

질문은 한 번에 모아 구현 전에 합니다. 답을 기다릴 수 없으면 날짜가 적힌 가장 최근 이력 항목을 따르고, 이력이 없으면 GUI 화면을 따릅니다. 고른 쪽과 근거는 보고의 질문 목록에 남깁니다. 두 파일을 합친 새 디자인을 만들지 않습니다.

메모와 다른 화면을 말없이 따라 구현합니다.

구현 완료 — 상품 목록
정렬  상품명 가나다순. 화면 12:341의 정렬 화살표를 따름

두 출처를 나란히 적어 구현 전에 묻습니다.

확인 필요 — 상품 목록
정렬  메모 12:395  최초 진입 시 등록일 최신순
      화면 12:341  상품명 컬럼에 정렬 화살표가 켜져 있음
      어느 쪽을 따를까요? 답이 없으면 GUI 화면을 따릅니다(정렬 이력 없음)

2.2 그려지지 않은 상태는 프로젝트 기본 컴포넌트로 채우고 보고합니다

디자인에 없는 로딩, 빈 목록, 오류 상태가 흰 화면이나 화면마다 다른 모양으로 남지 않습니다.

Figma 화면은 대개 데이터가 가득 찬 한 순간만 그립니다. 그려지지 않은 상태는 프로젝트에 이미 있는 컴포넌트로 채우고, 채웠다는 사실을 보고에 적습니다.

숨긴 레이어에 그 상태가 있으면 규칙 1.5에 따라 그 모양을 먼저 씁니다. 빈 상태 문구처럼 글자가 필요한데 디자인에 없으면 가정한 문구로 구현하고 질문 목록에 올립니다.

디자인에 없는 로딩 모양을 화면에서 새로 만듭니다.

<Suspense
	fallback={
		<div className="pg_products__loading">
			<img src={loadingGif} />
			<p>불러오는 중</p>
		</div>
	}
>
	<PgProductTableSection />
</Suspense>

프로젝트의 로딩 컴포넌트를 경계의 대체 화면으로 씁니다.

<Suspense fallback={<UiSpinner />}>
	<PgProductTableSection />
</Suspense>

채운 상태를 보고에 적습니다.

디자인 없음 — 상품 목록
로딩     UiSpinner로 채움
빈 목록  "등록된 상품이 없습니다" 가정, 확인 필요
오류     화면 오류 경계의 기본 표시

2.3 프레임 폭, 고정 크기, 샘플 문구는 표본으로 읽습니다

한 기기 폭과 샘플 데이터로 그린 치수가 다른 폭과 실제 데이터에서 넘치거나 비어 보이지 않습니다.

Figma 프레임은 한 기기 폭에서 샘플 데이터로 그린 한 장입니다. 치수에서는 의도만 읽고, 크기는 내용과 부모 폭이 정하게 둡니다.

긴 값의 처리가 Figma에 없으면 한 줄 말줄임과 전체 값 툴팁을 기본으로 하고 보고에 적습니다. 화면 폭에 따라 배치가 바뀌어야 하면 CSS 규칙 6.4에 따라 브레이크포인트보다 고유 크기와 grid, flex를 먼저 씁니다.

샘플 문구에 맞춘 칸 폭과 높이를 그대로 옮깁니다.

.pg_products__nameCell {
	width: 270px;
	height: 54px;
}

최소 폭만 두고 긴 이름은 한 줄로 줄입니다.

.pg_products__nameCell {
	min-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

함께 보기

• CSS 6.4 브레이크포인트보다 고유 크기 지정을 먼저 검토합니다
• CSS 6.3 레이아웃의 기준과 역할을 클래스 이름과 선언에 드러냅니다

2.4 정렬 아이콘, 펼침 화살표처럼 동작을 암시하는 표시는 동작으로 구현합니다

동작 표시를 그림으로만 옮겨 눌러도 반응 없는 화면을 만들지 않습니다.

Figma 화면은 정지 화면이라 동작은 표시로만 남습니다. 표시가 암시하는 동작은 컴포넌트가 이미 가진 프롭으로 켜고, 목적지나 조건을 모르면 질문합니다.

누르는 요소의 이름은 React 규칙 11.1을 따릅니다.

정렬 아이콘을 컬럼 이름 옆 그림으로만 옮깁니다.

/**
 * 상품 표의 컬럼 정의
 */
const productColumns = [
	{key: "name", label: "상품명"},
	{key: "price", label: <span>판매가 <img src={sortIcon} /></span>},
];

정렬 아이콘이 있는 컬럼에 표의 정렬 프롭을 켭니다.

/**
 * 상품 표의 컬럼 정의
 */
const productColumns = [
	{key: "name", label: "상품명"},
	{key: "price", label: "판매가", sortable: true},
];