콘텐츠로 이동

보상 연출 · 낮밤 미리보기

상태: Flutter 코드 적용·main 병합 및 원격 푸시 완료 · 외관은 사용자 확인 담당

최종 수정: 2026-11-03 · 코드 기준: 8a7538571eb162ff06b7acdfa27ba0ee8a0f9e0e

집중 완료 첫 화면에서 실제 획득한 생물이 물결과 함께 나타나고, 획득 빛과 반짝임이 퍼진 뒤 천천히 움직인다. ‘보상 받기’를 누르면 기존 코인 보상 단계로 이어진다. 진행 중 집중의 종료 버튼과 주야간 배지 가독성, 아트 미리보기의 낮·밤 선택과 보상 바로가기도 함께 반영했다.

이 문서는 집중 UI 적용 결과와 집중과 보상의 후속 기준이다. 이전 시안·수치·검증 기록은 제작 이력으로 보존한다. Git 푸시는 앱 스토어 배포나 휴대폰 설치 완료와 구분한다.

보상 연출 참고 시안: 물결에서 생물 등장, 획득 빛과 반짝임, 잔잔한 유영의 세 단계.

사용자가 인게임 적용을 요청한 연출 참고 시안이다. 실제 구현은 기존 종별 PNG 한 장을 움직이며, 시안에 제안된 별도 꼬리·지느러미 리깅까지 구현한 것은 아니다. 이미지 속 숫자와 생물은 예시이고 실제 보상은 저장된 획득 결과를 따른다.

시점 실제 표시
처음 약 0.4초 아래쪽에서 약간 올라오며 투명도와 크기가 증가해 생물이 나타남
약 0.3~1초 등장과 겹쳐 물결·흰빛·금색 반짝임이 퍼짐. 빛은 생물 뒤에 표시
약 0.4~1초 유영 진폭이 서서히 커져 등장 완료 순간 위치가 갑자기 바뀌지 않게 연결
1초 이후 약 3.6초 주기로 작은 좌우·상하 이동과 기울기 변화, 드문 기포가 반복
보상 받기 등장 도중에도 바로 다음 단계로 이동. 첫 단계의 획득 효과와 반복 유영을 끝내고 기존 코인 연출을 표시

이 시간은 연출 시작 기준의 대략적인 구간이다. 이미지 로딩이나 프레임 속도를 측정한 결과가 아니다. 실제 획득 종의 assets/codex/{speciesId}.png와 이름을 사용하며 원본 비율과 식별성을 유지한다.

  • 로컬 정산으로 저장한 획득 결과를 읽어 화면을 구성한다. 연출 위젯에는 보상 지급 코드를 넣지 않는다.
  • ‘보상 받기’는 이미 저장된 결과의 표시 단계만 바꾼다. 재추첨·중복 지급 없이 기존 코인 비행과 최종 잔액 표시로 이어진다.
  • 첫 단계의 생물 영역은 화면 높이에 따라 220 또는 260 논리 픽셀이며, 두 번째 단계에서 기존 전환에 맞춰 88 또는 112로 작아진다.
  • ‘한번 더 집중하기’와 ‘홈으로 돌아가기’는 기존 집중 준비 이동을 유지한다.

애니메이션 감소 설정에서는 생물이 바로 보이는 정지 이미지를 사용한다. 비활성 화면의 TickerMode와 백그라운드에서는 틱을 멈추고, 복귀하면 유영을 재개한다. 완료된 등장 장면을 다시 처음부터 재생하지 않으며, 화면 해제 시 컨트롤러와 수명주기 관찰자를 해제한다.

집중 중 ‘집중 그만하기’는 장면이 비치는 캡슐형 외곽선 버튼이다. 배경과 구분되도록 옅은 채움을 더하고, 기존 취소 확인과 실패 안내를 유지한다.

요소 현재 기준
밝은 장면의 버튼 채움 흰색 약 25% 불투명도
어두운 장면의 버튼 채움 짙은 남색 #081937, 20% 불투명도. 야간·심해 등 기존 장면 판정을 따름
글자와 선 장면별 전경색의 85% / 외곽선 40% 불투명도
크기와 모서리 화면 폭의 7/12, 최대 폭 280, 최소 높이 52, 모서리 반경 40
글자 18 논리 픽셀, 굵기 w600, 접근성 이름 ‘집중 취소’ 유지
집중 중 주야간 배지 고대비 배지의 흰 테두리 1 논리 픽셀

하단 안내와 버튼을 50 논리 픽셀 올린 배치는 앞선 8d897f2의 반영 범위다. 이번 커밋은 그 배치 위에 버튼의 은은한 배경과 얇은 배지 선을 적용했다. 기존 집중 UI 문서의 물 버튼·w700 표기는 이전 de72b0c 시점 기록이다.

앱 미리보기 실행 파일 미리보기-Windows.cmd 또는 미리보기-Mac.command를 열고, 터미널에 표시된 실제 주소의 preview.html에서 확인한다. 포트는 실행 환경에 따라 달라질 수 있다. 문서 사이트의 실행기와 앱 미리보기 실행기는 서로 구분한다.

  1. 상단 시간대에서 현재 시간 / 주간 / 야간을 고른다.
  2. 화면 → 낚시터에서는 선택한 장면을 보고, 집중을 시작하면 그 시간대를 세션에 저장한다.
  3. 상단 보상 연출 보기를 누르거나 화면 → 집중 완료 · 보상 연출을 고르면 25분 완료 예시를 바로 연다.
  4. ‘보상 받기’를 눌러 코인 연출을 확인한다. 보상 연출 보기 또는 예시 상태로 초기화로 처음부터 다시 볼 수 있다.

지역·시간대 선택은 보상 바로가기에도 전달한다. 매번 예시 상태를 새로 만들므로 획득 생물이 달라질 수 있다. 화면 크기는 360×640, 360×800, 390×844, 768×1024, 1024×768 중에서 고른다.

실제 Flutter 웹 미리보기: 상단의 시간대 야간 선택과 보상 연출 보기 버튼, 완료 화면의 예시 생물과 보상 받기 버튼.

작업 중 Flutter 웹 미리보기 실행 캡처다. 새 메뉴와 완료 화면의 연결을 보여주며, 정지 이미지 한 장으로 움직임·프레임 속도·실기기 외관을 검증하지 않는다. 상단에서 선택한 야간은 예시 세션의 시간대이며, 완료 화면 배경은 기존 공통 바다 배경을 사용한다. 전체 빌드가 출시 커밋과 동일하다는 증거로 제시하지 않는다. 원본 사본의 해시는 이미지 폴더의 manifest에 기록한다.

시간대 수동 선택은 Tools/Preview 전용이다. 주간은 공통 기준점에서 1시간, 야간은 6시간 지난 예시 시각을 사용하며 ‘현재 시간’은 실제 시계를 사용한다. 화면 표시와 집중 시작 시 저장되는 dayPhase에 같은 시계를 전달한다.

제품은 5시간 주야간 규칙을 유지한다. 실제 사용자 저장소와 운영 API를 사용하는 대신 미리보기의 메모리 DB에만 예시를 만든다. 예시 25분·코인·획득 종을 실제 사용자의 보상으로 해석하지 않는다.

작업 커밋은 f54c7667fa820f64d455af16ee5c2208136c815e, main 통합은 8a7538571eb162ff06b7acdfa27ba0ee8a0f9e0e다. 14개 파일을 선별해 병합했으며, 병행 중인 수족관 입수 연출은 이 커밋 범위와 구분한다.

검사 앱 구현·병합 당시 결과
포맷 217개 파일, 변경 없음
Flutter 분석·전체 테스트 격리 후보와 실제 main 모두 분석 오류 없음, 전체 585개 통과
미리보기 도구 Node 검사 16개 통과, 플랫폼별 1개 skip
보상 위젯 등장·유영, 999→1000ms 위치 연속성, 감소 설정, 보상 단계 전환, TickerMode·수명주기·해제 검사
화면과 데이터 다섯 화면 크기·두 배 글씨에서 보상 버튼 접근과 중복 지급 방지, 주야간 표시·시작 정보 일치 검사
웹 미리보기 빌드 성공, 제공 중인 파일과 빌드 결과의 SHA-256 일치 확인
독립 코드 리뷰 gpt-6.1-sol / medium, 수정 후 P1/P2 없음

위 숫자는 앱 구현·main 병합 단계의 기록이며, 이번 기획서 편집에서 앱 테스트를 다시 실행했다는 뜻이 아니다. 공유 작업 폴더에서 발생했던 수족관 변경의 검사 오류는 이번 14개 파일의 독립 후보와 분리해 재검증했다.

기초 구현 + 사용자 시각 확인 방식이다. 움직임 크기·속도·빛 강도와 실제 Android/iOS 외관·GPU·장시간 발열·배터리는 별도 확인 대상이다. 이번 문서 업데이트에서는 기존 시안과 실행 캡처를 재사용한다.

집중 UI 적용 결과 · 집중과 보상 · 낚시터 UI · AI용 Markdown · 근거와 변경 이력