ACCESSIBILITY-FIRST DESIGN

보이지 않는 사용자를 위한 UI는
들리는 순서로 설계됩니다

시각장애인을 위한 음성 공연 보조 서비스 — 나레이터 앱 · 청취자 앱 UI/UX 디자인 및 스토어 등록 에셋 제작 제안

01. Analysis & Strategy

공고에 적힌 요구사항 뒤에는
세 가지 진짜 과제가 있습니다

클라이언트 핵심 요구사항

2개 앱 · 16개 화면군 Figma 디자인

나레이터 앱 9개 화면군(스플래시·로그인·온보딩 5단계·메인·공연 중·공연 메모·공연 상세·프로필·약관)과 청취자 앱 7개 화면군을 7일 내에 완성해야 합니다.

스토어 등록 에셋 3종 제작

앱 아이콘(AOS 512·iOS 1024), 팟빵 앱 형식을 선호하시는 스토어 스크린샷, 피처드 이미지(1024×500)까지 규격에 맞춰 납품해야 합니다.

큰 글씨 · 높은 명도 대비 · 단순 레이아웃

비기능 요구사항으로 명시된 시각장애인 접근성. 이 프로젝트에서는 장식이 아니라 품질의 정의 그 자체입니다.

핵심 역제안

화면이 아니라 '낭독'을 설계해야 합니다

화면을 보지 못하는 사용자에게 실제 UI는 스크린리더가 읽어주는 문장의 순서입니다. 시안만 넘기면 개발팀은 무엇을 읽힐지 스스로 정해야 합니다.

전맹보다 '저시력' 사용자가 훨씬 많습니다

그래서 공고에도 큰 글씨와 명도 대비가 먼저 적혀 있습니다. 음성만이 아니라 확대에도 버티는 레이아웃이 함께 필요합니다.

'항목 변동 가능성'을 구조로 방어해야 합니다

계약 특이사항에 명시된 기능 변경 요청. 화면을 한 장씩 그리면 변경 한 번에 일정이 무너지므로, 컴포넌트 라이브러리가 전제되어야 합니다.

02. Strategic Deep-Dive

접근성을 '검수 항목'이 아니라
설계의 출발점으로 삼는 3가지 전략

Voice Spec Layer

모든 화면에 보이지 않는 레이어를 한 장 더 얹습니다. 포커스 이동 순서(①→②→③), 각 요소의 낭독 문구와 역할·힌트, 상태 변화 시 읽어줄 안내문(예: "공연이 시작되었습니다. 청취자 47명")을 화면 위에 그대로 명시해 납품합니다.

Expected Effect

개발팀이 Semantics 라벨을 고민할 필요 없음 · 접근성 재작업 0회

Type & Contrast System

Figma Variables로 타이포·컬러·간격을 토큰화하고, 글자 크기 100% / 150% / 200% 세 단계에서 레이아웃이 깨지지 않는 상태를 각각 시안으로 증명합니다. 모든 텍스트는 WCAG AA(4.5:1) 이상, 핵심 조작 요소는 AAA(7:1) 이상으로 실측합니다.

Expected Effect

저시력 사용자 이탈 방지 · 스토어 접근성 심사 리스크 제거

One Foundation, Two Apps

공고가 요구하신 '공통 템플릿'을 구조로 실현합니다. 파운데이션 라이브러리 1개를 나레이터 앱 파일과 청취자 앱 파일이 함께 참조하도록 구성해, 두 앱의 톤과 조작 규칙이 절대 어긋나지 않게 만듭니다.

Expected Effect

변경 요청 시 컴포넌트 1곳 수정으로 양쪽 앱 동시 반영

03. Implementation

7일 안에 16개 화면군을 완성하는
4개 트랙의 실행 계획

디자인 파운데이션

Figma Variables 토큰 컬러·타이포·간격·라운드를 변수로 정의해 200% 확대까지 한 번에 전환
공용 컴포넌트 라이브러리 버튼·리스트 카드·상태 배지·다이얼로그를 두 앱이 공유하도록 구성

접근성 엔지니어링

포커스 맵 & 낭독 문구 화면별 이동 순서와 읽어줄 문장을 번호로 명시한 Voice Spec 시트
대비 · 터치 타깃 실측 명도 대비 수치표와 최소 48dp·핵심 96dp 터치 영역 검증 리포트

화면 설계

나레이터 앱 9개 화면군 온보딩 승인·반려 흐름, 공연 중 마이크 상태와 청취자 수, 공연 메모까지
청취자 앱 7개 화면군 공연 없을 때 자동 대기, 초대형 터치 영역의 청취 중 화면 중심 설계

스토어 & 핸드오프

팟빵형 스토어 키트 아이콘 512·1024, AOS·iOS 스크린샷, 피처드 1024×500 규격 일괄 제작
Flutter 매핑 시트 각 요소를 Semantics(label·hint)와 TextScaler에 그대로 연결하는 대조표
04. Sequence

프로젝트의 성공을 완성하는
정교한 8단계 업무 프로세스

01

미팅

요구사항 청취 및 비즈니스 목표 상세 협의

02

계약 진행

상세 과업 범위 확정 및 공식 계약 체결

03

요구사항 재분석

개발 관점에서의 기술적 타당성 도출

04

기획/디자인

UI/UX 설계 및 시스템 아키텍처 상세 정의

05

클라이언트 컨펌

확정된 기획안에 대한 최종 리뷰 및 승인

06

개발

PMS를 통한 투명한 집중 개발

07

테스트

단위/통합 테스트 및 버그 수정, 안정성 검증

08

배포

최종 운영 환경 배포 및 안정화 지원

05. Timeline

착수 다음 날부터 결과가 보이는
7일 실행 로드맵

DAY 1

파운데이션 확정

기존 개발 완료 화면 구조 분석, 컬러·타입 토큰과 대비 기준 확정, 공용 컴포넌트 1차 세트 공유. 첫날 저녁 Figma 링크 전달.

DAY 2-3

나레이터 앱 9개 화면군

스플래시·소셜 로그인·온보딩(약관·이름·포트폴리오·승인 대기·반려)·메인·공연 중·공연 메모·공연 상세·프로필·약관 완성.

DAY 4-5

청취자 앱 7개 화면군

공용 컴포넌트를 재사용해 목록·자동 대기·청취 중·공연 상세를 완성하고, 폰트 150·200% 확대 시안을 동시에 검증.

DAY 6-7

스토어 키트 · 검수 납품

아이콘·스크린샷·피처드 이미지 제작, Voice Spec 시트와 접근성 실측 리포트 정리 후 Figma 원본 일괄 인계.

06. Communication & Trust

외주의 불안함을 확신으로,
가장 투명한 파트너십을 약속합니다.

'답답함'이 없는 커뮤니케이션

클라이언트가 가장 힘들어하는 '소통의 부재'와 '진척도 확인 불가능'을 해결하기 위해, 모든 협업 과정을 시스템화했습니다.

  • 자체 PMS 시스템 운영: 기획서부터 소스코드까지 실시간 공유
  • 항시 연결되는 소통 채널: 지연 없는 피드백과 투명한 이슈 관리
  • 정기 데모 세션: 상상 속의 결과물이 아닌, 돌아가는 시스템을 매주 확인

"우리는 단순한 외주사가 아닙니다.
성공을 위해 시스템으로 소통하는
여러분의 사내 팀이 되겠습니다."

Thank You

Your Vision, Our Mission.