IA·화면 설계: 구조와 인터랙션
IA·화면 설계: 구조와 인터랙션
서론
좋은 구조는 사용자가 길을 잃지 않게 하고, 좋은 화면은 팀이 같은 그림을 보게 한다.
이 글은 요구사항 정의서(RD) 다음 단계로, 정보를 어떻게 배치하고 화면과 인터랙션을 어떻게 설계할지 정리합니다. 핵심은 정보 구조(IA)와 화면 설계서를 통해 누구나 같은 경로와 상태를 이해하도록 만드는 것입니다.
📚 목차
본론
1) IA 기본 구성 원칙
- 산출물: 사이트맵, 사용자 플로우, 권한 맵, 콘텐츠 유형.
- 조직 원리: 작업 기반(Task), 객체 기반(Object) 중 하나로 일관.
- 예: “회원 영역”과 “비회원 영역”의 경계를 IA에서 명확히 구분.
2) 네비게이션·메뉴 전략
- 주 네비게이션: 5~7개 이내, 과부하 방지.
- 보조 네비게이션: 컨텍스트 메뉴, 탭, 필터.
- 경로 표시: 크럼브로 현재 위치를 명확히 표시.
- 딥링크: 공유 가능한 URL 규칙을 IA 단계에서 정의.
3) 화면ID 규칙과 버전
- ID 예:
SCR-JOIN-001,SCR-PDP-010. - 연결: RD 요구사항ID, API, 테스트케이스(TC)와 상호 링크.
- 버전: v0.9(초안) → v1.0(확정), 변경 이력 테이블 유지.
4) 와이어프레임 구성 요소
- 화면 목적: 한 문장으로 정의.
- 핵심 요소: 컴포넌트 목록과 속성.
- 인터랙션: 입력, 전환, 포커스, 애니메이션 트리거.
- 마이크로카피: 버튼/라벨 문구를 문장형으로 명시.
- 예: “가입 버튼 라벨: ‘이메일로 가입하기’”.
5) 상태·오류·빈 상태 설계
- 정상: 기본 데이터가 있을 때의 배치.
- 빈 상태: 다음 행동 제안(예: “상품을 검색해 보세요”).
- 오류: 메시지+해결 행동(재시도, 고객센터).
- 검증: 입력 오류는 필드 하단 문장형, 포커스 이동.
- 예: “비밀번호는 10~32자입니다. 다시 입력해 주세요.”
6) 반응형·디바이스 고려
- 브레이크포인트: 360·768·1280px를 기본 기준으로 사용.
- 그리드: 모바일 4–6, 태블릿 8, 데스크톱 12컬럼.
- 터치 영역: 최소 44×44px, 여백 8px 이상.
- 미디어: 비율 유지, 썸네일 크기·자르기 규칙 명시.
7) 접근성 체크포인트
- 키보드: 탭 순서와 포커스 링이 보이도록.
- 대체 텍스트: 의미 있는 이미지에 alt 제공.
- 대비: 본문 텍스트 대비 4.5:1 이상 권장.
- 폼: 라벨 연결, 오류 시 ARIA 속성 고려.
8) 프로토타입과 검증
- 수준: 로우파이 → 미드파이, 인터랙션만 먼저 확인.
- 과제: 3~5개 핵심 과업으로 유효성 검증.
- 지표: 완료율, 소요 시간, 오류/재시도 빈도.
9) 산출물 링크 구조
- 화면 설계서 각 페이지에 RD 요구사항ID를 표기.
- 컴포넌트 옆에 API 엔드포인트와 예시 응답 링크.
- 상태 정의 옆에 테스트케이스(TC) ID를 병기.
10) 품질 체크리스트
- 화면ID·요구사항ID·API·TC가 일관되게 연결된다.
- 모든 화면은 정상/빈/오류/로딩 상태를 가진다.
- 반응형 배치와 터치 영역 기준이 정의되어 있다.
- 접근성 기본 항목(포커스·alt·대비·라벨)이 충족된다.
- 버전과 변경 이력이 최신이다.
결론
IA·화면 설계는 RD를 화면과 상호작용으로 번역하는 단계입니다. 용어와 식별자를 일관되게 유지하고, 상태와 접근성까지 포함해 문서화하면 개발과 QA가 같은 기준으로 움직일 수 있습니다. 위의 체크리스트로 설계를 점검하고, 산출물 링크를 통해 탐색성을 높이세요.
FAQ
Q IA와 와이어프레임의 차이는 무엇인가요?
A IA는 정보의 구조와 경로를 정의하고, 와이어프레임은 개별 화면의 배치와 인터랙션을 표현합니다.
Q 와이어프레임의 상세 수준은 어느 정도가 적당한가요?
A 컴포넌트, 상태, 마이크로카피가 보일 정도면 충분합니다. 시각 디자인은 후속 단계에서 다룹니다.
Q 컴포넌트 규격이 변경되면 어떻게 반영하나요?
A 화면ID 버전을 올리고, 변경 이력과 영향을 받은 RD·API·TC 링크를 함께 갱신합니다.
Q 접근성 검토는 언제 진행하나요?
A 와이어프레임 단계에서 기본 항목을 점검하고, 프로토타입 단계에서 키보드·스크린리더 테스트를 추가합니다.
Q 반응형 브레이크포인트는 몇 개를 쓰나요?
A 기본은 360·768·1280px 세 가지를 권장합니다. 필요 시 서비스 트래픽에 맞춰 추가합니다.