시력·색맹·난시·노안 4가지를 한 미니앱에 담기까지

무엇을 만들었나

눈 상태를 확인하려면 시력표, 색각 검사, 난시 검사, 노안 검사를 각각 찾아야 할 때가 있습니다. 검사 방법이 서로 달라 중간에 멈추기 쉽고, 결과를 한곳에서 이어서 확인하기도 어렵습니다.

ai-eye-test는 “지금 내 눈 상태를 간단한 검사로 확인해볼 수 있을까?”라는 질문에서 출발한 앱인토스 미니앱입니다. 시력·색맹·난시·노안 네 가지 검사를 한곳에서 진행하고, 각 검사 결과까지 자연스럽게 이어지도록 구성했습니다.

시력 검사에는 랜돌트 C 시표를 사용했습니다. 화면 크기를 맞추기 위해 신용카드 보정 기준을 적용했으며, 시표 방향은 음성으로 입력할 수 있게 했습니다. 화면을 계속 터치하지 않아도 검사를 진행할 수 있는 방식입니다.

현재 ai-eye-test는 개발을 마치고 배포·출시한 상태입니다. 앱인토스 제출 규격에 맞춰 로고, 썸네일, 스크린샷, 번들 빌드와 약관 URL도 정비했습니다.

📌 먼저 보는 핵심 답변

• ai-eye-test는 시력·색맹·난시·노안 4가지 검사를 제공하는 앱인토스 미니앱입니다.
• 검사 시작부터 결과 확인까지 실제 동작하며, 결과 보기 직전에 전면광고를 노출하도록 연결했습니다.
• 앱인토스 제출용 에셋과 번들 빌드를 정비해 배포·출시했고, 추가 미출시 기능은 별도 계획으로 다루지 않습니다.

네 가지 검사를 하나의 제품 범위로 정한 이유

ai-eye-test는 시력·색맹·난시·노안 네 가지 검사를 제품 범위로 정했습니다. 사용자가 검사마다 다른 서비스를 오가지 않고, 시작 화면에서 원하는 검사를 선택한 뒤 결과까지 확인하도록 구성했습니다.

네 검사는 화면 구성과 입력 방식이 서로 다릅니다. 다만 검사 선택, 측정, 결과 확인이라는 기본 흐름은 최대한 일정하게 유지했습니다.

시력 검사에서는 실제 화면 환경에 맞춰 측정 조건을 조정하는 데 초점을 두었습니다. 랜돌트 C 시표의 틈이 표준보다 넓으면 방향을 쉽게 맞힐 수 있어 SVG 값을 수정했습니다. 화면 보정에는 신용카드의 긴 변이 아닌 짧은 변 53.98mm를 기준으로 사용했습니다.

입력 방식은 터치와 음성 인식을 함께 고려했습니다. 한국어와 영어 모드를 나누고, 영어 모드에서는 `en-US`로 인식하도록 연결했습니다. `up`, `down`, `left`, `right` 키워드를 처리하는 과정에서 발생하던 방향 오탐도 수정했습니다.

사용자는 이렇게 검사를 진행한다

1. 앱을 연 뒤 시력·색맹·난시·노안 중 확인할 검사를 선택합니다.

2. 선택한 검사 화면에서 안내에 따라 문항이나 시표를 확인합니다. 시력 검사에서는 화면 보정을 진행한 뒤 랜돌트 C의 방향을 입력합니다. 방향은 화면 터치나 음성으로 답할 수 있습니다.

3. 음성 입력을 사용할 때는 한국어 또는 영어 모드를 선택합니다. 영어 모드에서는 `en-US` 인식 설정을 사용하며, `up`, `down`, `left`, `right` 방향 키워드로 결과를 입력합니다.

4. 검사를 시작할 때 결과 화면 직전에 노출할 전면광고를 미리 불러옵니다. 검사 중간에는 광고를 표시하지 않습니다.

5. 검사를 완료하면 결과 화면으로 이동하기 전에 전면광고를 노출합니다. 광고가 정상적으로 준비된 환경에서는 광고가 표시된 뒤 결과 화면으로 이어집니다.

6. 광고 SDK를 지원하지 않거나 광고 요청에 실패한 환경에서는 광고를 건너뛰고 결과 화면으로 바로 이동합니다. 광고 때문에 검사 결과 확인이 막히지 않도록 예외 흐름을 마련했습니다.

측정 화면에서 수정한 세부값

검사 화면은 문항을 보여주는 데서 끝나지 않습니다. 사용자가 화면을 보고 방향을 입력하고, 보정 기준에 맞춰 측정해야 하므로 작은 수치 하나도 결과 경험에 영향을 줍니다.

랜돌트 C 시표에서는 틈의 크기를 먼저 점검했습니다. 초기 SVG의 `strokeDasharray` 값 때문에 C자 틈이 표준보다 약 2.57배 넓게 벌어져 있었습니다. 이 상태에서는 시표를 실제보다 쉽게 읽을 수 있어 측정값에 영향을 줄 수 있습니다. 틈의 호 길이 값을 `231.1 20.2`로 수정해 표준 비율에 맞췄습니다.

스마트폰 화면 보정에서는 신용카드의 긴 변인 85.6mm를 사용하던 기준을 다시 확인했습니다. 긴 변은 스마트폰 화면의 실제 물리 가로폭보다 길 수 있어, 카드의 짧은 변인 53.98mm를 기준으로 변경했습니다.

음성 입력에서는 언어 설정과 방향 단어를 함께 점검했습니다. 영어 모드에서는 `SpeechRecognition.lang`을 `en-US`로 전환했고, 방향 키워드 처리 과정에서 발생하던 오탐도 수정했습니다.

현재 상태, 다음 계획, 배운 점

현재 ai-eye-test는 네 가지 검사를 실제 제품 범위에 포함해 배포·출시한 상태입니다. 앱인토스 제출 규격에 맞춰 로고 600×600, 썸네일 1932×828, 스크린샷 636×1048을 준비했으며, 제출용 스크린샷 6장과 번들 빌드도 확인했습니다. 테스트 20/20 통과, TypeScript 검사 무오류, `ait build` 정상 완료도 확인했습니다.

출시 전에는 측정 결과에 직접 영향을 줄 수 있는 시표 비율, 화면 보정 기준, 음성 입력 오탐을 우선 수정했습니다. 광고는 검사 시작 시 미리 불러오고, 검사 완료 직후 결과 화면 전에 노출하도록 구성했습니다. 광고를 지원하지 않는 환경에서는 결과 화면으로 바로 넘어가게 처리했습니다.

다음 단계는 새로운 기능을 이미 제공하는 것처럼 확장하는 일이 아닙니다. 출시된 네 가지 검사와 결과 화면, 광고 전환이 실제 발행 환경에서도 같은 순서로 동작하는지 계속 확인할 계획입니다.

이번 개발을 통해 기능을 한곳에 많이 담는 것만큼 측정 과정에 영향을 주는 세부값을 검증하는 일이 중요하다는 점을 배웠습니다. 시표의 틈 비율이나 카드 보정 기준처럼 작아 보이는 결정도 사용자의 검사 경험을 바꿀 수 있었습니다. 네 가지 검사 중 어떤 항목을 먼저 사용하게 될지는 실제 사용자 흐름을 더 확인해야 할 질문으로 남았습니다.

첨부한 실제 화면

• 이미지 1: 01.jpg (실제 화면 1)
• 이미지 2: 02.png (실제 화면 2)
• 이미지 3: 03.jpg (실제 화면 3)
• 이미지 4: 04.jpg (실제 화면 4)

❓ 자주 묻는 질문

Q. ai-eye-test에서는 어떤 검사를 받을 수 있나요?

A. 시력, 색맹, 난시, 노안 검사를 제공합니다. 검사별 화면 흐름과 결과 확인 과정이 앱에 구현돼 있습니다.

Q. 검사 결과를 보기 전에 광고가 나오나요?

A. 4가지 검사 시작 시 전면광고를 미리 불러오고, 검사가 끝난 직후 결과 화면으로 전환하기 전에 노출합니다. 광고 SDK를 지원하지 않는 환경에서는 광고 없이 결과 화면으로 연결됩니다.

Q. 랜돌트 C 시표는 어떻게 보정했나요?

A. 랜돌트 C의 틈이 표준보다 넓어지지 않도록 SVG의 간격 값을 수정했습니다. 신용카드 보정 기준도 긴 변이 아닌 짧은 변인 53.98mm를 사용하도록 변경했습니다.

Q. 이 제품은 어디에서 사용할 수 있나요?

A. 앱인토스 규격에 맞춰 에셋과 번들을 정비한 뒤 배포·출시한 제품입니다. PC 브라우저나 광고 SDK를 지원하지 않는 테스트 환경에서는 광고 없이 결과 화면을 확인할 수 있습니다.

이 개발기를 참고할 때

이 글은 제가 직접 만든 제품의 개발 과정을 정직하게 공유하는 기록입니다.

• 스크린샷과 설명은 작성 시점의 실제 상태 기준이며, 이후 업데이트로 달라질 수 있습니다.
• "다음 계획"으로 표시한 기능은 아직 완성된 기능이 아닙니다.
• 참고하거나 인용할 때는 이 글의 URL을 출처로 남겨주세요.
• 궁금한 점이나 피드백은 댓글로 남겨주시면 다음 개발과 다음 글에 반영하겠습니다.