실제 사용자를 위한 Shamba-MedCare AI 앱 구축
Source: Dev.to
실제로 내가 만들고 있는 사용자들
내 타깃 사용자에 대한 불편한 진실:
이는 엣지‑케이스 접근성이 아니라 실제 사용 사례다: 안경을 찾을 수 없는 55세 농부, 손톱 밑에 흙이 묻은 채 밝은 햇빛 아래에서 신호가 하나뿐인 상황. 바로 이 사람이 이 앱을 가장 필요로 한다.
그래서 나는 개발자가 내 코드를 검토하는 것이 아니라 그녀를 중심으로 접근성 시스템을 구축했다.
모든 것을 바꾼 음성 버튼
내가 만든 가장 영향력 있는 기능은 놀라울 정도로 단순했다: 진단/결과를 소리로 읽어주는 버튼.
나는 Web Speech API를 사용했는데, 이는 모든 최신 브라우저에 내장되어 있다. 구현은 한 시간 정도 걸렸지만, 그 영향은 엄청났다. 음성은 읽을 수 없는 사용자를 돕는 것뿐 아니라 모두에게 도움이 된다.
완벽히 읽을 수 있는 우리 엄마는 “Your tomato has early blight. This is a fungal disease. Severity is moderate”라는 말을 화면에 적힌 글보다 더 신뢰한다며, 마치 사람에게 조언을 듣는 듯한 느낌이라고 했다.
음성 스크립트도 중요하다. 나는 JSON 응답을 그대로 읽게 하지 않고 대화식으로 만든다:
“당신의 토마토 잎은 100점 만점에 45점의 건강 점수를 가지고 있습니다. 초기 블라이트(Early Blight)라는 곰팡이 질병을 감지했으며, 심각도는 중간입니다. 치료를 위해서는 님 오일 스프레이를 사용할 수 있는데, 물 1리터에 두 큰술을 섞어 7일마다 뿌리세요.”
섹션 사이에 멈춤을 두고, 구체적인 측정값을 제시하며, 전문 용어는 배제한다. AI가 이 문장을 생성한 이유는 프롬프트에 “농부가 따라 할 수 있는 실용적이고 실행 가능한 치료 단계를 제공하라”라고 명시했기 때문이다.
깨지지 않는 폰트 스케일링
접근성 설정 패널에서는 Normal, Large, Extra Large 폰트 크기를 선택할 수 있다. 사소해 보이지만 구현 과정에서 CSS 구조에 대해 많은 것을 배웠다.
나는 문서 루트 요소에 폰트 크기를 변경했다. rem 단위를 사용하는 모든 컴포넌트가 자동으로 스케일링된다—prop drilling도, context provider도 필요 없다. 한 줄의 JavaScript만으로 전체 앱이 반응한다.
핵심은 처음부터 rem을 사용해 컴포넌트를 만드는 것이다. 픽셀 값을 하드코딩했다면 접근성을 뒤늦게 적용하려면 전면 재작성이 필요했을 것이다. 다행히 Tailwind의 기본 클래스가 rem을 사용하므로 대부분의 UI가 별도 수정 없이 올바르게 스케일링됐다.
설정은 localStorage에 저장돼, 큰 글꼴이 필요한 농부가 매 세션마다 다시 켤 필요가 없다.
거친 손을 위한 터치 목표
Apple은 터치 목표 최소 44 px를 권장한다. 나는 그보다 크게 잡았다.
왜냐하면? 삼촌이 은행 앱을 사용하려는 모습을 보았다. 그의 손가락은 수십 년간 농사일을 하면서 두꺼워졌고, 잘못된 버튼을 자꾸 누른다—그가 서투른 것이 아니라 앱이 매끄러운 개발자 손(맥북 타이핑)으로 설계됐기 때문이다.
내 버튼 크기:
- 일반 버튼: 최소 높이 48 px
- 주요 액션(예: “Analyze”): 최소 높이 56 px
- 하단 네비게이션: 최소 높이 64 px
하단 네비게이션 배치도 중요하다. 엄지는 자연스럽게 폰트 하단에 위치한다. 주요 네비게이션을 하단에 두면 실제로 한 손으로 사용할 수 있게 되며, 웹에서는 보통 상단에 배치하는 관행과는 다르다.
읽지 않아도 되는 색상
건강 점수는 다섯 단계 색상 심각도 시스템을 사용한다:
사용자는 색상만 보고도 얼마나 걱정해야 하는지 알 수 있다—읽을 필요가 없다. 교통 신호등 메타포는 보편적이다: 초록은 진행, 빨강은 정지.
나는 이 색상을 세 가지 이유로 선택했다:
- 색맹 안전 진행 – 녹색에서 빨강으로 갈수록 밝기가 감소하므로 색 인식이 어려워도 심각도를 파악할 수 있다.
- 햇빛 가시성 – 고채도 색상은 밝은 야외에서도 구분이 잘 된다; 파스텔 색은 빛에 씻겨 나간다.
- 문화적 친숙함 – 전 세계 어디서든 교통 신호등이 존재하므로 메타포가 즉시 이해된다.
점진적 공개
Claude가 제공하는 전체 진단은 25개 이상의 필드를 포함한다: 질병명, 학명, 신뢰도 점수, 증상, 원인, 전파 위험, 긴급성, 성분 및 제조 단계가 포함된 치료법, 예방 팁, 지역 가용성 메모 등.
한 번에 모든 정보를 보여주면 텍스트가 많은 인터페이스에 어려움을 겪는 사람에게는 압도적이다.
