TO WORK — 집중 UI 작업 목록

상태: 후속 UI 요구사항 확정 · 세부 정책 일부 미정 · 앱 구현·검증 미완료

최종 수정: 2026-11-01 · 대상: UI 담당자

아직 완성되지 않은 집중 관련 화면을 UI 담당자가 제작할 수 있도록 정리한 작업 목록이다. 사용자 요청에서 정한 동작과 Forest 화면에서 참고할 구성을 구분한다. 첨부 이미지는 Forest 앱의 레퍼런스이며 Little Cast의 현재 실행 화면이나 최종 시안이 아니다. 화면 구성·정보의 순서·전환을 참고하고, 배경·색·버튼·생물 표현은 Little Cast의 기존 아트와 UI에 맞춘다.

기존 화면별 동작과 집중과 보상은 현재 구현을 설명한다. 이 페이지는 앞으로 만들거나 보완할 화면의 목표이며, 기존 문서를 구현 완료 근거로 사용하지 않는다.

작업과 레퍼런스 대응표

작업	Forest 원본 파일명	Little Cast에서 적용할 핵심
01. 태그 선택	`태그선택.jpg`	시작 전·진행 중 접근, 태그 하나 선택, 추가·편집 진입
02. 태그 추가	`새 태그 추가.jpg`	이름 입력·색상 선택·취소·추가
02. 태그 편집	`기존 태그 편집.jpg`	기존 이름·색상 표시, 수정·취소·저장
03. 집중 제목	`집중 제목 입력편집.jpg`	현재 집중의 제목 입력·수정
04. 완료 1단계	`집중 완료 1.jpg`	태그·제목, 최초 획득 알림, 생물, 문구·집중 시간·보상 버튼
05. 완료 2단계 통합	`집중 완료 2.jpg` + `집중 완료 3.jpg`	생물 상승 → 코인 표시·코인바 이동 → 홈/다시 집중

원본은 저장소 references/ForestApp/Focusing/에 있다. 아래 이미지를 누르면 사이트에 포함한 사본을 원래 크기로 볼 수 있다. 출처는 모두 사용자가 제공한 Forest 앱 스크린샷이다.

전체 화면 흐름

출발	사용자 행동	연결할 화면·상태
집중 시작 전 / 집중 진행 중	태그 영역 선택	태그 선택 화면
태그 선택	행 선택	현재 집중에 적용할 단일 태그 선택
태그 선택	추가 / 행의 편집 아이콘	태그 추가 / 태그 편집 화면
현재 집중의 제목 영역	입력 / 수정	집중 제목 입력·편집 화면
정상 집중 완료	결과 진입	완료 1단계: 획득 생물 확인
완료 1단계	‘보상 받기’	완료 2단계: 코인 보상·다음 행동
완료 2단계	‘홈으로 돌아가기’ / ‘한번 더 집중하기’	홈 / 다음 집중 흐름. 정확한 도착지·설정 유지 정책은 아래 미정 항목 참조

완료 흐름은 총 2단계로 만든다. Forest의 완료 2와 완료 3 사이에 있는 ‘계속’ 버튼과 별도 3단계 화면은 Little Cast 흐름에 두지 않는다.

01. 태그 선택

레퍼런스: 태그선택.jpg. 행 단위 선택 표시, 색상 점·이름·편집 아이콘의 구분, 하단 추가 진입을 참고한다. ‘여가’ 선택과 태그 이름은 예시다.

요구사항 — 확정

집중을 시작하기 전과 집중 진행 중 모두 태그 선택 화면을 열 수 있어야 한다.
한 집중에는 하나의 태그만 선택할 수 있다. 다른 행을 고르면 이전 행의 선택 표시를 해제한다.
선택한 태그가 무엇인지 색상 외에 테두리·선택 표시 등으로 구분한다.
각 행에는 태그 이름과 편집 진입을 둔다. 행 선택과 편집 아이콘의 동작을 구분한다.
목록에서 기존 태그를 편집하거나 새 태그를 추가할 수 있다. Little Cast에서는 ‘카테고리’ 대신 태그로 표기를 통일한다.

제작할 상태: 목록 기본, 한 행 선택, 스크롤이 필요한 긴 목록, 추가·편집 후 목록 복귀. 시작 전과 진행 중 진입을 모두 연결한다.

현재 구현과의 차이: 기존 문서는 시작 시 태그를 고정하는 계약이다. 이번 후속 요구에는 진행 중 태그 변경이 포함되므로 UI만 바꾸지 말고 현재 세션과 완료 기록에 선택을 반영할 연결 작업이 필요하다. 태그 변경이 집중 타이머를 초기화하거나 보상을 다시 추첨하는 동작으로 이어지지 않도록 기존 집중·정산 계약과 함께 검증한다.

02. 태그 추가·편집

태그 추가

레퍼런스: 새 태그 추가.jpg. 목록 위 모달, 이름과 색상을 함께 정하는 구성, 선택 색상의 체크 표시를 참고한다. 빈 입력에서 추가 버튼이 흐리게 보이는 상태도 참고할 수 있다.

요구사항 — 확정: 태그 선택 화면의 추가 진입으로 새 태그를 만드는 화면을 제공한다.

UI 구성 제안: 제목 ‘새 태그’, 비어 있는 이름 입력란, 색상 팔레트, ‘취소’·‘추가’ 버튼을 둔다. 취소는 변경을 반영하지 않고 목록으로 돌아가며, 추가 성공 후 새 태그가 목록에 표시되도록 연결한다. 추가 직후 자동 선택 여부는 미정이다.

기존 이름 규칙인 중복되지 않는 1~30자를 유지해 입력 오류 상태를 설계한다. 색상 팔레트의 정확한 색·개수는 미정이며 Forest의 15색을 그대로 제품 규칙으로 확정하지 않는다.

태그 편집

레퍼런스: 기존 태그 편집.jpg. 기존 이름·색상을 채워 보여주는 수정 상태와 취소·저장 구분을 참고한다. 우측 상단 휴지통은 Forest에 있는 기능이며 Little Cast의 삭제 정책은 아직 확정하지 않았다.

요구사항 — 확정: 기존 태그의 편집 화면을 제공한다.

UI 구성 제안: 제목 ‘태그 편집’, 기존 이름 입력값·선택 색상, ‘취소’·‘저장’ 버튼을 둔다. 취소하면 원래 값을 유지하고, 저장 후 목록에 수정된 값을 표시한다. 편집 대상에는 이름·색상 구성을 제안하되, 기본 태그까지 수정할지와 색상 저장 방식은 후속 구현 전에 정한다.

제작할 상태: 새 태그의 빈 입력, 유효한 입력, 중복·길이 오류, 기존 값이 채워진 편집, 색상 변경, 취소, 저장 후 목록. 삭제 버튼 노출·삭제 확인·선택 중 태그 삭제 처리는 아래 미정 항목이다.

03. 현재 집중의 제목 입력·편집

레퍼런스: 집중 제목 입력편집.jpg. 바텀시트 형태, 짧은 제목 입력란과 키보드가 함께 보이는 상태를 참고한다. ‘수학 2단원’은 입력 예시다.

요구사항 — 확정

현재 집중에 제목을 입력하거나 기존 제목을 편집할 수 있는 화면을 제공한다.
태그와 제목은 별도 정보다. 제목을 바꾼다고 선택한 태그가 바뀌지 않는다.
완료 1단계 상단에는 해당 집중의 제목을 표시한다.

UI 구성 제안: ‘이번 집중의 제목’ 바텀시트와 입력란을 사용한다. 새 입력 시 안내 문구를, 편집 시 기존 제목을 보여준다. 완료 1단계의 제목 영역을 입력·편집 진입점으로 제안한다. 시작 전·진행 중에도 제목 진입을 둘지는 미정이다.

제작할 상태: 제목 없음·입력 중·기존 제목 편집·키보드 열림·입력 반영 후 복귀. 키보드가 입력란과 확정 동작을 가리지 않도록 구성한다. 키보드 완료와 시트 닫기의 저장·취소 규칙, 글자 수 상한은 미정으로 남긴다.

04. 집중 완료 1단계 — 획득 생물 확인

레퍼런스: 집중 완료 1.jpg. 위에서부터 알림 → 태그·제목 → 획득 대상 → 집중 문구 → 시간·보상 버튼의 정보 순서를 참고한다. Little Cast의 획득 대상은 식물 대신 어종 또는 동물이다.

화면 구성 — 확정

위치	표시할 내용	동작·조건
최상단 알림 영역	신규 어종·동물 최초 획득 알림	해당 종을 처음 획득했을 때만 표시
상단 정보 영역	이번 집중의 태그와 제목	두 정보를 획득 생물 위에 배치
중앙	이번에 획득한 어종 또는 동물	생물의 형태를 알아볼 수 있게 주인공으로 표시
중앙 생물 아래	집중 관련 문구	기본 문구는 ‘벌써 N분이 흘러갔어요’
하단	실제 집중한 시간	`N`과 시간 표시는 같은 완료 결과를 기준으로 구성
하단 주요 버튼	보상 받기	완료 2단계로 연결

N은 이번 완료 결과의 집중 분 수다. 예를 들어 25분을 집중했다면 기본 문구는 ‘벌써 25분이 흘러갔어요’다. 레퍼런스의 ‘잘하셨어요! 10분을 알차게 보냈어요.’를 기본 문구로 사용하지 않는다. 분 미만 값의 표시·반올림 정책은 기존 완료 시간 표시와 대조해 후속 확정한다.

최초 획득 알림의 문구 예시는 ‘새로운 생물을 처음 만났어요!’로 제안한다. 이미 획득한 종이면 이 알림을 표시하지 않는다. 구체적인 알림 문구·지속 시간과 제목이 비어 있을 때의 표시는 미정이다.

제작할 상태: 첫 획득 / 재획득, 제목 있음 / 없음, 긴 제목, 어종 / 동물, 서로 다른 집중 시간. 이미지의 OS 상태바·Forest 아이콘·식물 이미지는 제품 화면의 구성 요소로 옮기지 않는다.

05. 집중 완료 2단계 — 코인 보상과 다음 행동 통합

Forest 완료 2에서 참고할 요소

레퍼런스: 집중 완료 2.jpg. 획득 대상이 상단으로 올라간 배치, 그 아래 코인 보상 표시, 우측 상단 잔액 영역을 참고한다. 화면의 ×3·+9·711은 Forest 예시이며 Little Cast 보상 배율·수량·잔액의 기준이 아니다.

Forest 완료 3에서 참고할 요소

레퍼런스: 집중 완료 3.jpg. 완료 후 다음 행동을 고르는 하단 영역을 참고한다. Little Cast에서는 완료 2와 통합하며 ‘휴식 취하기’ 대신 ‘한번 더 집중하기’를 둔다. 별도 요약 카드·집중 메모 추가는 이번 확정 범위에 포함하지 않는다.

통합 화면과 연출 — 확정

완료 1단계의 ‘보상 받기’를 누르면 같은 획득 어종·동물이 자연스럽게 위로 올라간다.
생물 아래에 이번 집중으로 획득한 코인을 표시한다.
코인이 우측 상단 코인바로 올라가는 연출을 보여주며 잔액 표시와 연결한다.
코인 표시 아래에는 **‘홈으로 돌아가기’**와 ‘한번 더 집중하기’ 버튼을 둔다.

Forest의 구조	Little Cast 적용
완료 2에서 보상 확인 후 ‘계속’	중간 ‘계속’ 없이 같은 통합 화면에서 다음 행동 제공
완료 3의 별도 화면	완료 2와 합쳐 전체 완료 흐름을 2단계로 축소
‘홈으로 돌아가기’	유지
‘휴식 취하기’	이 완료 흐름에는 표시하지 않음
추가 집중 버튼 없음	‘한번 더 집중하기’ 추가

연출 시간·이동 거리·생물 크기·버튼 등장 시점은 UI 제작 시 제안할 값이다. 단계 사이에서 같은 생물을 유지해 결과가 이어진다는 인상을 준다. 별도 조작으로 열어야 하는 세 번째 완료 화면은 만들지 않는다.

보상 연결 시 유지할 기존 계약: 코인 수량과 잔액은 실제 로컬 정산 결과를 사용한다. ‘보상 받기’와 코인 이동 연출을 새로운 추첨·추가 지급으로 구현하지 않는다. 중복 탭·화면 재진입·연출 중단으로 이미 정산한 보상이 다시 지급되면 안 된다. 화면에 표시할 잔액의 연출 전후 전환 시점은 구현 시 정산 상태와 함께 맞춘다.

제작할 상태: 생물 상승 전환, 코인 수량 표시, 코인 이동 중·완료, 최종 버튼 2개 표시. 어종과 동물 모두 같은 완료 흐름을 사용한다.

UI 담당자 인계 체크리스트

시작 전·진행 중 태그 선택 진입, 단일 선택과 편집·추가 동작을 연결한다.
태그 추가·편집의 이름 입력, 색상 선택, 오류·취소·저장 상태를 만든다.
현재 집중 제목의 새 입력·편집과 키보드 표시 상태를 만든다.
완료 1단계에 태그·제목·획득 생물·기본 문구·집중 시간·보상 버튼을 배치한다.
최초 획득에만 상단 알림을 표시한다.
완료 2·3을 통합하고 생물 상승·코인 표시·우측 상단 코인바 이동을 연결한다.
최종 행동은 ‘홈으로 돌아가기’·‘한번 더 집중하기’로 구성한다.
‘계속’으로 여는 별도 3단계와 ‘휴식 취하기’ 버튼이 없는지 확인한다.
실제 집중 결과·획득 종·코인 정산과 화면 데이터를 연결한다.

앱 화면 제작 시 주 기준은 360×800, 대응 범위는 360×640 / 390×844 / 768×1024 / 1024×768이다. 짧은 화면·키보드·긴 제목에서 필수 조작이 가려지지 않는지 확인할 대상으로 인계한다. 이 목록은 제작·검수 항목이며 이번 문서 작성에서 앱 화면을 구현하거나 검수했다는 뜻이 아니다.

구현 전에 정할 세부 정책

아래는 사용자가 아직 지정하지 않은 사항이다. 레퍼런스만으로 확정하지 않는다.

항목	미정 내용
태그 관리 범위	기본 태그의 편집 허용 여부, 삭제 제공 여부, 선택 중인 태그 삭제 시 대체 선택, 기존 기록의 이름·색상 반영 범위
태그 추가·선택 마감	새 태그 자동 선택 여부, 행 선택 후 즉시 닫기 또는 별도 확정 방식
태그 색상	팔레트 값·개수·기본값 및 저장·기록 반영 방식
진행 중 태그 변경	현재 세션·완료 기록 저장 경로와 기존 시작 시 고정 계약 조정
집중 제목	시작 전·진행 중 진입 여부, 글자 수 상한, 빈 제목 표시, 저장·취소·닫기 동작과 기록 반영
완료 표시	최초 획득 알림 문구·지속 시간, 시간 형식·분 처리, 연출 시간·크기·이동 경로
최종 버튼 도착지	홈이 집중 준비/낚시터인지 수족관인지, 다시 집중이 준비로 돌아가는지 즉시 시작하는지, 이전 시간·태그·장비 설정을 유지할지