집중 UI · 인게임 적용 결과

상태: Flutter 인게임 코드 적용·main 병합 및 푸시 완료 · 실제 모바일 설치·배포 상태는 별도 확인

최종 수정: 2026-11-01 · 코드 기준: de72b0cdd2fc09d17e035a634771f163d2fecd6c

이번 변경은 실제 앱이 사용하는 Flutter 화면 코드에 적용됐다. 태그·제목·2단계 보상은 52e262e, 집중 중 배치와 타이포 조정은 d253345이며, 두 변경을 main에 통합한 기준이 de72b0c다. 설치된 휴대폰 앱에서 보려면 해당 코드로 빌드·설치하거나 앱 업데이트가 필요하다. Git 푸시를 모바일 앱 배포 완료로 해석하지 않는다.

집중 화면 개선은 풍경과 낚시 움직임의 기준이고, 이 문서는 그 위의 UI와 실제 데이터 연결을 설명한다. 기존 TO WORK의 원 요구사항·레퍼런스·당시 미정 사항은 제작 이력으로 보존한다. 적용 여부와 후속 정책은 이 페이지를 함께 읽는다.

현재 집중 화면

실제 Flutter 웹 미리보기의 산호 주간 집중 화면: 작은 하늘색 점과 공부 주제, 큰 남은 시간, 아래 안내와 집중 그만하기 버튼. 별도 제목 줄은 없다.

사용자가 확인한 수정 후 Flutter 웹 실행 캡처. 뷰포트는 432×960이며 화면 배율 2로 저장한 PNG는 864×1920이다. 주제·타이머·버튼의 실행 결과를 보여주며, 휴대폰 실기기 촬영·프레임 속도·배터리 측정이나 네 지역 전체의 최종 외관 검수를 대신하지 않는다. 이미지 출처와 SHA-256은 같은 이미지 폴더의 manifest에 기록한다.

배치와 타이포

아래 수치는 Flutter 논리 픽셀 기준이다. 원화의 1080×2400 해상도나 캡처 PNG의 물리 픽셀과 구분한다. 네 지역·주야간은 같은 타이머 페이지를 사용하며 어두운 장면의 글자는 밝게 표시한다.

요소	현재 코드 기준
상단 정보 위치	상단 안쪽 여백을 8 → 40으로 늘려 로고·장소·주제·시계를 아래로 이동
주제	타이머 위, 글자 16, 두 줄과 말줄임 지원. 진행 중 세션의 태그 ID에 해당하는 이름을 표시
주제 색상 점	글자 앞 12×12 원, 밝은 테두리 2, 글자까지 간격 8. 장식 점은 스크린 리더에서 제외
장소 배지와 주제	사이 간격 32. 주제 행 자체의 안쪽 여백은 가로 12·세로 8
시계	84, `FontWeight.w200`, 자간 -3, 행 높이 1.12, 숫자 고정 폭. 좁은 화면·큰 글자에서도 한 줄에 맞춰 축소
주제와 시계	주제 행 아래 간격 4
종료 버튼	화면 폭의 7/12(약 58%), 최대 폭 280. 기존 물 버튼 자산·종횡비와 최소 높이 52 유지
종료 버튼 글자	18, 굵기 `w700`, 문구 집중 그만하기
하단 안내	집중하는 동안, 새로운 만남이 다가와요. — 안내 아래부터 버튼까지 간격 28

‘남은 집중 시간’, ‘25분 집중’, 평상시 ‘낚시 중’ 문구와 별도의 ‘이번 집중의 제목’ 줄은 진행 화면에서 제거했다. 주제와 남은 시간을 중심으로 보여준다. 통화로 인한 일시정지 안내, 보호 집중 경고와 저장 오류 안내는 유지한다.

제목 입력 기능은 유지한다. 진행 화면의 상단 메뉴에서 집중 제목을 열 수 있으며, 제목을 표시하는 별도 줄을 타이머 위에 다시 두지는 않는다.

주제별 색상과 태그 연결

색상 점은 공통 하늘색 상수가 아니라 선택한 태그의 **colorIndex와 공용 12색 팔레트 focusTagColors**를 사용한다. 이름·색상을 편집하면 같은 태그 데이터에 연결된 점도 해당 값을 읽는다. 일반 집중은 세션 초안의 태그 ID, 보호 집중은 activeTagId를 사용하므로 준비 화면에서 다음 태그를 바꿨다고 진행 중 주제가 임의로 바뀌지 않는다.

기본 태그	초기 색상	팔레트 인덱스
업무	코랄 `#EF927D`	0
공부	하늘색 `#73B6E7`	5
독서	초록 `#7EB99C`	3
창작	보라 `#A992CE`	7
운동	황록 `#C6BB65`	2
기타	회청 `#8CABB8`	10

위 표는 초기값이며 고정된 이름·색 규칙은 아니다. 기본 태그와 사용자 태그 모두 이름·색 편집을 지원한다. 이름은 사용자에게 보이는 1~30글자이며 빈 값과 중복 이름을 거절한다. 선택 화면에서 한 태그를 고르고 선택 완료로 반영하며 새 태그 추가·기존 태그 편집·취소·저장 상태를 제공한다. 진행 화면의 주제 행을 누르면 같은 선택 화면을 연다.

함께 적용된 제목과 완료 UI

기능	`de72b0c` 적용 범위
집중 제목	태그와 별도 정보. 준비 화면·진행 중 메뉴·완료 1단계에서 입력/편집, 키보드 완료로 반영. 사용자에게 보이는 최대 60글자
완료 1단계	실제 태그·제목, 획득 생물 그림과 이름, 집중 분 수 문구와 시간, 보상 받기. 최초 획득 알림은 정산 당시 첫 발견인 결과에만 표시
완료 2단계	같은 생물이 작아지며 위로 이동하고 실제 코인 보상을 표시. 코인이 우측 상단 잔액으로 이동하는 연출
다음 행동	홈으로 돌아가기 / 한번 더 집중하기 모두 현재 설정을 유지한 집중 준비로 이동. 즉시 새 타이머를 시작하지 않음
제외된 단계·행동	세 번째 완료 화면, ‘계속’, ‘휴식 취하기’ 없음
정산	보상 버튼은 이미 저장된 결과의 표시 단계만 변경. 재추첨·코인 중복 지급 없음

태그·제목 편집은 시간·이벤트 순서·보상 seed·시작 장비/낚시터/확률을 바꾸지 않는다. 로컬 schema3에는 제목·태그 이름/색 스냅샷을 저장하고 기존 v1/v2 DB를 마이그레이션한다. 백엔드 기록 계약에도 제목·색상 필드가 들어갔으나 운영 서버 반영 여부는 별도 확인 대상이다.

검증 기록과 확인 범위

다음은 앱 구현·main 병합 때 수행한 기록이다. 이번 기획서 편집에서 앱 테스트를 다시 실행했다는 뜻은 아니다.

검사	확인한 결과
main 통합	`de72b0c` 로컬 병합·원격 main 푸시 및 원격 SHA 확인
Flutter	포맷 검사 200파일 변경 없음, 정적 분석 문제 없음, 전체 테스트 531개 통과
백엔드	타입 검사·테스트 9개 통과, 배포 없는 dry-run 빌드 통과
주제 표시 회귀	네 지역에서 실제 시간 유지·세션 주제 표시·중복 문구 제거, 준비 태그 변경이 진행 주제를 덮지 않는 검사
긴 주제·접근성 글자	360×640, 글자 2배, 긴 사용자 주제와 180분 타이머에서 종료 버튼 접근 검사
독립 리뷰	`gpt-6.1-sol / medium`으로 main 병합 검토, 조치가 필요한 중요 결함 없음

캡처는 실제 Flutter 웹 미리보기다. 실제 Android/iOS 설치·터치·키보드, 장시간 발열·전력, 플랫폼별 글꼴과 Shader 표현은 이 검증으로 완료됐다고 하지 않는다. 기초 구현 + 사용자 시각 조정 방식을 유지하며, 사용자 확인 캡처 한 장을 전체 장면·모든 기기의 미관 승인으로 확대하지 않는다.

코드와 적용 근거

집중과 보상 · 집중 화면 개선 · 원 요구사항과 레퍼런스 · 근거와 변경 이력