TCI 평가 앱을 만들기 전, 8장의 화면과 미니앱 패키징부터 점검한 기록

① TCI 평가 앱을 만들기 전에 확인하려 한 것

TCI 평가를 활용한 애플리케이션을 만들기 위해 persona-map 작업을 시작했습니다. 처음부터 완성된 서비스의 모습을 정하기보다 TCI가 어떤 검사인지, 참고할 논문과 검사 방법은 무엇인지 살펴보고 이를 앱의 흐름에 어떻게 적용할 수 있을지 검토하는 단계였습니다.

핵심 질문은 사용자가 앱에서 자신의 기질과 성격을 이해하는 과정을 어떻게 제공할 것인가였습니다. 단순히 문항을 제시하고 결과를 계산하는 데 그치지 않고, 평가의 근거와 사용 범위까지 함께 고려하는 서비스를 만들고자 했습니다.

초기 검토에서는 TCI를 네 가지 기질 차원인 자극추구·위험회피·보상의존·지속성과 세 가지 성격 차원인 자기초월·협동성·자기지향성으로 정리하는 방향을 살펴봤습니다. 다만 이 차원을 실제 문항과 결과 해석에 적용하려면 별도의 검토가 필요합니다.

현재는 TCI 평가 기능을 완성된 기능처럼 구현하지 않고 있습니다. TCI 원문 문항의 사용 권한과 국내 저작권 문제, 논문과 검사 방법에 근거한 평가 모델을 먼저 확인하고 있습니다. 동시에 앱 화면 구성과 미니앱 패키징 범위도 점검하는 중입니다.

② 현재 구현 범위와 핵심 결정

현재 persona-map에서 확인할 수 있는 범위는 화면 구성, 기본 사용 흐름, 타입 검사, 프로덕션 빌드와 미니앱 번들 패키징입니다. 제출용 스크린샷은 8장 기준으로 정리했으며, React와 React DOM을 바탕으로 화면을 구성했습니다. 토스 미니앱 환경을 고려해 @apps-in-Toss/web-framework를 사용하고, 아이콘은 lucide-react로 다루는 구조를 선택했습니다.

처음부터 TCI 전체 기능을 넣기보다 서비스의 기본 흐름과 화면 구성을 확인하는 데 집중했습니다. 하단 탐색 영역은 기존의 고정형 탭바에서 플로팅 캡슐 형태로 개편했습니다. 둥근 모서리, 글래스모피즘, 주변 여백과 그림자를 적용했으며, 콘텐츠가 탭바에 가리지 않도록 하단 스크롤 여백도 조정했습니다.

검사 시작 시 광고가 노출되는 흐름은 사용자의 시작 행동과 자연스럽게 연결되는지를 기준으로 점검했습니다. 실제 발행 전에는 광고 위치와 다음 화면으로 이동하는 동작을 다시 확인할 예정입니다.

개발 과정에서는 타입 검사를 거친 뒤 프로덕션 빌드를 진행하고, 앱인토스 표준 규격에 맞춘 번들 패키징을 확인했습니다. 현재의 핵심은 완성된 TCI 검사 서비스가 아니라 이후 기능을 추가할 수 있는 화면·탐색·패키징 기반을 마련하는 데 있습니다.

③ 사용자는 앱에서 어떤 흐름을 경험하는가

현재 화면 흐름은 다음과 같은 사용자 시나리오를 기준으로 점검했습니다.

1. 사용자가 앱을 실행하면 첫 화면의 안내를 확인합니다.

2. 안내 내용을 바탕으로 검사 시작 여부를 판단한 뒤 시작 버튼을 선택합니다.

3. 검사 시작 단계에서 광고가 노출됩니다. 광고가 다음 행동을 방해하지 않고 검사 시작 과정에 자연스럽게 연결되는지를 점검합니다.

4. 사용자는 하단의 플로팅 캡슐형 내비게이션으로 주요 화면을 이동합니다.

5. 각 화면에서 하단 내비게이션이 콘텐츠를 가리지 않는지, 버튼과 화면 전환이 실제 빌드에서도 의도한 대로 작동하는지 확인합니다.

이 흐름은 제출용 스크린샷 8장과 실제 빌드를 대조하며 점검했습니다. 화면 수를 늘리는 것보다 앱을 연 사용자가 다음 행동을 이해할 수 있는지, 주요 이동 경로가 자연스러운지가 현재 확인의 중심이었습니다.

다만 이 흐름에 TCI 원문 문항과 평가 결과 해석을 적용한 상태는 아닙니다. 문항 사용 권한과 국내 저작권, 네 가지 기질과 세 가지 성격 차원의 해석 방식은 법적·심리학적 검토 후 별도로 구체화할 예정입니다.

④ 화면 구현에서 마주한 현실

화면이 작동하는 것과 미니앱 심사 기준을 충족하는 것은 별개의 문제였습니다. persona-map은 기능 구현뿐 아니라 토스 미니앱의 디자인과 사용성 기준도 함께 확인해야 했습니다.

특히 하단 탭바 형태를 검토하면서 내비게이션을 다시 손봤습니다. 기존의 고정형 구조를 플로팅 캡슐 형태로 바꾸고 둥근 모서리, 여백, 그림자 효과를 적용했습니다. 하단 콘텐츠가 내비게이션에 가리지 않도록 스크롤 여백도 조정했습니다. 작은 디자인 요소처럼 보였지만 사용성과 심사 기준을 동시에 고려해야 하는 작업이었습니다.

TCI 적용에서는 기술보다 먼저 확인할 범위가 있었습니다. 원문 문항과 해석 콘텐츠는 심리검사 도구와 연결되어 있으므로 저작권과 국내 사용 권한을 검토해야 합니다. 합법적으로 사용할 수 있는 문항과 데이터의 범위를 정하는 일이 기능 구현보다 앞서야 한다고 판단했습니다.

결과 제공 방식도 아직 확정하지 않았습니다. 네 가지 기질 차원과 세 가지 성격 차원을 어떤 기준으로 해석할지, 논문과 검사 방법을 어떻게 반영할지 추가 검토가 필요합니다. 사용자가 심리적 오해를 겪지 않도록 현재의 화면·패키징 작업을 TCI 평가 기능의 완성으로 보지 않고 있습니다.

⑤ 현재 상태, 다음 계획, 배운 점과 남은 질문

현재 persona-map은 TCI 평가 서비스 전체를 구현한 상태가 아니라, 미니앱으로 실행하고 제출할 수 있는 기본 범위를 점검한 단계입니다. 확인 가능한 결과는 제출용 스크린샷 8장, 화면 구성, 기본 동작, 타입 검사, 프로덕션 빌드와 미니앱 번들 패키징입니다. 하단 내비게이션은 플로팅 캡슐 형태로 개편했으며 하단 여백과 그림자·모서리 표현도 조정했습니다.

다음 단계에서는 TCI 원문 문항을 바로 추가하지 않고 자료의 저작권과 국내 사용 권한부터 확인할 예정입니다. 이후 Cloninger 모델을 어떤 검사 방식으로 적용할지, 문항과 결과 해석을 어느 범위까지 제공할지, 심리평가 결과를 앱에서 어떤 표현으로 안내할지를 논문과 검사 방법을 바탕으로 구체화할 계획입니다. 광고 위치와 다음 화면으로의 이동도 실제 발행 전에 다시 확인합니다.

이번 작업을 통해 평가 서비스는 화면 구현만으로 완성되지 않는다는 점을 배웠습니다. 미니앱 패키징과 제출 화면을 먼저 정리하더라도 문항의 권리와 해석의 근거가 확정되지 않으면 기능 범위를 넓히기 어렵습니다.

앞으로는 기능을 추가하는 속도보다 사용할 수 있는 자료와 제공 가능한 표현을 먼저 확인하려 합니다. 아직 남은 질문은 합법적으로 사용할 수 있는 문항과 데이터의 범위가 어디까지인지, 사용자가 결과를 과도하게 단정적으로 받아들이지 않도록 어떤 해석 구조와 안내 문구를 설계해야 하는지입니다.

첨부한 실제 화면

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

이 개발기를 참고할 때

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

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