나레이터 앱 · 청취자 앱 · 디자인 핸드오프 3개 관점의 9개 핵심 화면 사전 기획서입니다. 각 화면에는 포커스 이동 순서와 스크린리더 낭독 문구가 함께 설계되어 있습니다.
청취자 앱은 '찾는 앱'이 아니라 '기다려주는 앱'이어야 합니다. 탐색 단계를 최소화하고, 공연이 열리면 앱이 먼저 말을 겁니다.
탭 바 없이 진행 중인 공연 목록이 곧 첫 화면. 실행 즉시 오늘 공연을 낭독합니다.
글씨 크기 100·150·200%와 고대비 테마를 온보딩에서 한 번에 정합니다.
공연이 없으면 대기 화면 유지, 시작되면 자동 안내 후 두 번 눌러 입장합니다.
화면의 41%가 단일 터치 영역. 보지 않고도 볼륨과 종료를 조작합니다.
종료 시 다음 공연 일정을 음성으로 안내하고 목록으로 되돌립니다.
공연장은 어둡습니다. 저시력 사용자가 객석에서 화이트 배경 대형 UI를 켜면 눈부심이 오히려 방해가 됩니다. 그래서 청취자 앱은 다크 고대비를 기본 테마로 설계하고, 지금 들을 수 있는 공연 한 건을 화면 상단에 가장 크게 배치했습니다. 탭 바를 없애 화면 이동 자체를 제거했습니다.
제안서 역제안 ①(Voice Spec Layer)을 그대로 시각화한 화면입니다. 오른쪽 스펙 패널은 실제 납품물의 형식으로, 각 요소의 포커스 순번과 낭독 문구를 확정해 개발팀에 전달합니다. 공연이 시작되면 화면 갱신 없이 라이브 리전으로 즉시 알립니다.
공고의 '공연 없을 때 자동 대기'와 '실시간 음성 청취'는 사실 하나의 화면이 가진 두 가지 상태입니다. 별도 화면으로 만들면 전환 시 포커스가 튀어 사용자가 길을 잃습니다. 동일 컴포넌트의 상태 변형으로 설계해 포커스를 유지합니다.
청취 중 화면의 핵심은 '버튼을 크게'가 아니라 '영역을 넓게'입니다. 340×300px(화면의 41%)를 단일 볼륨 조작 영역으로 잡아, 화면을 보지 않고 손가락을 아무 데나 올려도 조작이 성립하게 만듭니다. 데모 Step 3에서 직접 확인하실 수 있습니다.
공고가 요구한 포스터·공연명·공연장·소개·줄거리·캐스팅·무대 설명을 한 화면에 담되, 맨 위에 '한 줄 음성 요약'을 둡니다. 전체를 다 듣지 않아도 이 공연이 무엇인지 5초 안에 파악하게 하는 장치입니다.
시각장애인 앱에서 이미지는 대체 텍스트가 없으면 존재하지 않는 것과 같습니다. 저희는 포스터 대체 텍스트 문구까지 디자인 산출물에 포함해 납품합니다. 각 섹션은 재생 시간이 표기된 접힘 목록으로, 듣고 싶은 부분만 선택할 수 있습니다.
나레이터는 어두운 해설석에서 대본과 무대를 동시에 봅니다. 앱을 오래 볼 수 없으므로, 조작은 최소 단계로 끝나야 합니다.
관리자가 배정한 공연만 노출. 시작까지 남은 시간을 상단에 고정합니다.
관리자 메모(읽기 전용)와 개인 노트(편집)를 시각·낭독 모두로 구분합니다.
입력 레벨을 파형으로 보여주고, 켜짐/꺼짐을 햅틱으로도 확인시킵니다.
경과 시간·청취자 수·마이크 상태 3가지만 남긴 단일 목적 화면입니다.
종료 시 총 청취자 수와 진행 시간을 요약해 다음 공연 준비로 연결합니다.
공고의 온보딩은 약관 동의·이름 입력·포트폴리오 등록(선택)·관리자 승인 대기·반려까지 5단계입니다. 이를 5개의 독립 화면으로 그리면 7일 일정에서 손해입니다. 하나의 상태 카드 컴포넌트가 4가지 변형을 갖도록 설계했습니다.
제안서 역제안 ③(One Foundation, Two Apps)의 실제 적용 예입니다. 이 상태 카드는 청취자 앱의 온보딩에서도 그대로 재사용되며, 문구만 교체됩니다. 기능 변경 요청이 오면 컴포넌트 하나만 수정하면 양쪽 앱에 동시 반영됩니다.
공연 중 화면에는 경과 시간, 마이크 상태, 청취자 수 외의 어떤 요소도 두지 않습니다. 어두운 해설석에서 잘못 누를 수 있는 요소를 제거하는 것이 이 화면의 유일한 목표입니다. 마이크 파형은 '소리가 실제로 나가고 있다'를 눈으로 확인시키는 장치입니다.
오른쪽 패널은 화면에는 보이지 않지만 반드시 설계되어야 하는 두 가지, 라이브 리전 낭독 로그와 햅틱 패턴을 명세한 것입니다. 마이크 ON은 짧게 1회, OFF는 짧게 2회, 종료는 길게 1회로 정의해 화면을 보지 않고도 상태를 확신하게 만듭니다.
공고의 '관리자 메모'와 '나레이터 개인 참고용 노트'는 권한이 다른 두 종류의 텍스트입니다. 이 차이를 색으로만 구분하면 색각 이상 사용자와 스크린리더 사용자 모두에게 사라집니다. 테두리·라벨·낭독 문구 3중으로 구분했습니다.
'메모 음성으로 듣기' 버튼은 공고에 없지만 반드시 필요합니다. 공연 직전 어두운 해설석에서 긴 메모를 눈으로 읽기 어렵기 때문입니다. 기존 화면 구조를 바꾸지 않고 버튼 하나를 더하는 최소 변경으로 해결합니다.
개발 적용은 클라이언트 내부에서 진행됩니다. 그래서 산출물은 '그림'이 아니라 '명세'여야 합니다. 아래 3개 문서가 Figma 원본과 함께 납품됩니다.
컬러/타이포/간격을 변수화하고 모든 조합의 명도 대비를 수치로 측정합니다.
'버튼', '이미지'로만 읽히는 요소를 전수 조사해 낭독 문구를 확정합니다.
각 요소를 Semantics·TextScaler 속성에 1:1로 연결한 대조표를 만듭니다.
TalkBack·VoiceOver 실기기로 전체 화면 낭독 순서를 통과 검증합니다.
아이콘·스크린샷·피처드를 규격별로 내보내 등록까지 바로 연결합니다.
| 화면 | 요소 | 포커스 | 낭독 문구 (label) | Flutter 매핑 |
|---|---|---|---|---|
| 청취자 / 메인 | 화면 제목 | 1 | “진행 중인 공연, 제목” | Semantics(header: true) |
| 청취자 / 메인 | 공연 카드 | 2 | “햄릿, 예술의전당 CJ토월극장, 청취자 47명” | Semantics(label:…, button:true) |
| 청취자 / 메인 | 입장 버튼 | 3 | “입장하기, 버튼. 두 번 누르면 청취를 시작합니다” | Semantics(hint:'두 번 누르면…') |
| 청취자 / 청취 중 | 볼륨 영역 | 2 | “소리 조절 영역. 위쪽은 크게, 아래쪽은 작게” | MergeSemantics + onIncrease |
| 청취자 / 청취 중 | 상태 알림 | - | “청취자가 47명으로 늘었습니다” | SemanticsService.announce() |
| 나레이터 / 공연 중 | 마이크 토글 | 2 | “마이크 켜짐. 두 번 누르면 끕니다” | Semantics(toggled: true) |
| 나레이터 / 공연 메모 | 관리자 메모 | 1 | “관리자 메모, 읽기 전용” | Semantics(readOnly: true) |
| 공통 / 온보딩 | 약관 체크박스 | 3 | “이용약관 동의, 체크 안 됨, 필수” | Semantics(checked: false) |
이 표가 이번 제안의 핵심 차별점입니다. 시안만 받은 개발팀은 각 위젯에 어떤 문장을 넣어야 할지 스스로 정해야 하고, 그 순간 접근성 품질은 운에 맡겨집니다. 저희는 16개 화면군 214개 낭독 요소를 모두 확정해 표로 납품합니다.
화면 / 요소 / 포커스 순번 / 낭독 문구 / Flutter 매핑 5열 구조입니다. 개발팀은 마지막 열을 그대로 코드에 옮기면 됩니다. '미정의 0건'이 될 때까지 검수하는 것이 납품 조건입니다.
| 요소 | 전경 / 배경 | 대비 | 기준 |
|---|---|---|---|
| 본문 텍스트 | #F1F5F9 / #0F172A | 16.1:1 | AAA |
| 입장 버튼 | #FFFFFF / #C2185B | 5.9:1 | AA |
| 진행 상태 배지 | #FDE68A / #0B1220 | 13.4:1 | AAA |
| 보조 설명 (수정 전) | #94A3B8 / #1E293B | 4.2:1 | → #CBD5E1 교체 |
'큰 글씨, 높은 명도 대비'라는 요구를 감각이 아니라 수치로 증명합니다. 글자 크기 100·150·200% 세 단계에서 레이아웃이 무너지지 않는 상태를 각각 시안으로 만들고, 모든 텍스트 조합의 대비를 측정해 기준 미달 항목은 색을 교체합니다.
제안서 역제안 ②(Type & Contrast System)의 결과물입니다. 200% 확대에서 텍스트를 말줄임 처리하지 않는 것이 원칙입니다. 저시력 사용자에게 말줄임은 정보 삭제와 같기 때문입니다. 대신 카드가 세로로 늘어나고 스크롤이 생기도록 설계합니다.
공고가 요구한 앱 아이콘(AOS 512·iOS 1024), 스크린샷, 피처드 이미지(1024×500)를 한 세트로 제작합니다. '팟빵 앱 형식 선호'는 취향이 아니라 오디오 서비스라는 카테고리 인식을 만들고 싶다는 요구로 해석했습니다.
스토어 스크린샷의 캡션 자체가 큰 글씨·고대비여야 합니다. 저시력 사용자는 앱을 설치하기 전 스토어 페이지에서 먼저 이탈하기 때문입니다. 캡션은 본문 대비 7:1 이상을 유지하며 4컷 서사(찾기→조작→확대→나레이터)로 구성합니다.