흩어지는 시간을 흘려보내지 마세요 - Focus Timer 사용 가이드

흩어지는 30분, 1시간을 그냥 흘려보내지 마세요 . Develog의 Focus Timer는 공부·작업 시간을 자동으로 모아 히트맵 + 타임테이블로 남기고, 끝난 뒤에는 곧바로 글로 정리할 수 있게 이어줍니다.

1. Focus Timer가 뭔가요?

좌측 하단(또는 위젯을 드래그한 위치)에 떠 있는 ⏱ 동그란 버튼이 바로 Focus Timer입니다.

모바일에서는 표시되지 않습니다. 위젯은 테블릿(가로 768px 이상) 화면에서만 동작해요. 모바일 전용 UI는 추후 추가 예정입니다. 그 전까지는 테블릿/노트북/데스크톱에서 사용해주세요.

이걸로 할 수 있는 일은 세 가지입니다.

• 시간을 정해놓고 집중합니다. 다이얼로 1~60분 선택, 진행 중 +10분 버튼으로 최대 180분(3시간)까지 연장.
• 공부한 시간이 자동으로 누적됩니다. 일시정지·재개를 반복해도 실제로 집중한 시간만 모아집니다.
• 끝나면 히트맵·타임테이블에 점이 찍힙니다. 그날 몇 시에 얼마나 공부했는지 한눈에 보이고, 그대로 글쓰기로 이어집니다.

💡 하루 30분씩만 꾸준히 — 한 달 뒤엔 타임테이블이 채워져 포트폴리오가 됩니다.

2. 시작하기

2-1. 위젯 열기

• 데스크톱 좌하단의 **둥근 타이머 아이콘(FAB)**을 클릭하면 패널이 열립니다.
• FAB 자체를 드래그해 원하는 위치로 옮길 수 있습니다 (짧은 클릭은 패널 열기, 8px 이상 끌면 위치 이동으로 판단). 옮긴 위치는 자동 저장됩니다.
• 패널이 펼쳐진 상태에서는 헤더는 드래그되지 않습니다 — 다시 접고 FAB에서 옮기세요.

2-2. 시간 정하기

다이얼(아날로그 시계 모양)에서 시간을 선택합니다.

• 클릭 → 5분 단위로 점프 (5 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 / 55 / 60분 라벨)
• 드래그 → 1분 단위로 미세 조정 (최소 1분)
• 다이얼 자체는 60분까지만 선택 가능합니다. 60분을 넘기고 싶다면 일단 60분으로 시작한 뒤 진행 중 +10분 연장 버튼 으로 늘리세요. 한 세션 누적 한도는 180분(3시간) 입니다.

2-3. 모드 선택 — 작업 vs 잠금

다이얼 아래 "공부 모드 선택" 영역에 두 개의 탭이 있습니다. (또는 work / lock 으로 부릅니다 — 이 가이드에서도 함께 표기합니다.)

💡 언제 잠금을 쓰나요? 시험 직전 마무리, 마감 직전 작업처럼 나도 모르게 다른 탭을 여는 걸 막고 싶을 때 추천합니다.

2-4. 시작 버튼

선택한 시간이 표시된 오렌지색 {N}분 시작 버튼을 누르면 타이머가 돕니다. 잠금 모드면 동시에 풀스크린으로 들어갑니다.

3. 사용 중 화면

타이머가 도는 동안 패널은 이렇게 바뀝니다.

💡 패널을 접어두셔도(작업 모드 한정) 둥근 FAB 안에 진행률 링과 남은 시간(MM:SS)이 함께 표시됩니다. 브라우저 탭 제목에도 ⏱ MM:SS · Develog 형태로 나타나서 다른 탭에 가 있어도 한눈에 확인됩니다.

3-1. 가운데 큰 숫자

남은 시간을 MM:SS 로 표시합니다. 1초 단위로 줄어듭니다.

3-2. 다이얼 색

• 빨간색 (fm-status-negative) — 정상 동작 중. 분 단위 활성 segment가 빨갛게 차오릅니다.
• 회색 — 일시정지 상태. 차오른 segment가 흐려집니다.

3-3. 버튼 영역

3-4. 풀스크린(잠금 모드) 화면

잠금 모드는 별도의 풀스크린 화면이 뜹니다.

• 우측 상단의 ☀️/🌙 버튼으로 라이트/다크 모드 전환
• 큰 다이얼이 가운데 위치
• 같은 일시정지·연장·종료 버튼이 하단에 위치

⚠️ 잠금 모드 핵심: 다음 중 어느 하나라도 발생하면 자동으로 일시정지 됩니다 — ESC로 풀스크린 빠지기, Cmd+Tab / Alt+Tab으로 다른 앱 전환, 다른 창 클릭, 탭 숨기기. 다시 집중하려면 위젯에서 이어서 를 누르세요.

4. 자동으로 일어나는 일들

타이머는 사용자가 까먹어도 알아서 처리해 줍니다.

4-1. 시간이 다 되면 자동 종료

남은 시간이 0초가 되면 알아서 종료되고, 위젯 자리에 완료 카드가 뜹니다. ("{N}분 공부 완료 / 오늘 배운 걸 정리해볼까요?" + 정리하기 / 닫기 버튼)

• 정리하기 → 새 글 작성 화면으로 이동합니다. 방금 한 공부를 바로 글로 남기기에 자연스럽습니다.
• 닫기 → 카드를 닫고 다시 idle 상태로 돌아갑니다.

💡 30초 안에 닫지 않으면 30초 뒤 자동으로 사라집니다.

⚠️ 완료 카드는 자연 종료(시간 끝까지 도달) 시에는 항상 뜨지만, 사용자가 직접 종료로 끊은 경우엔 누적 시간이 선택한 시간의 절반(50%) 이상일 때만 표시됩니다. 5분짜리 세션을 1분 만에 끄면 카드 없이 그냥 idle로 돌아갑니다.

4-2. 5분 / 1분 남았을 때 알림

브라우저와 OS 알림 권한을 허용하셨다면 Develog 로고와 함께 알림이 뜹니다:

• 5분 남음
  • 제목: Develog · 5분 뒤 자동 종료
  • 내용: 이대로 두면 세션이 끝나요. 더 하시려면 연장 버튼을 눌러주세요.
• 1분 남음
  • 제목: Develog · 1분 뒤 자동 종료
  • 내용: 지금 연장을 누르지 않으면 그대로 종료됩니다.

집중하느라 시계 못 봐도 되도록 "연장하지 않으면 종료된다" 는 점을 명확히 알려드립니다.

4-3. 탭을 닫거나 새로고침해도 안 사라집니다

브라우저를 닫거나 새로고침해도 세션은 서버에 살아 있습니다. 다시 들어오시면 같은 세션이 이어집니다(자동으로 일시정지된 상태로 복원됩니다 — 다시 이어서 만 누르시면 됩니다). 복원 시 우측 상단에 "일시정지된 세션이 있어요. 이어서 누르면 재개됩니다" 토스트가 한 번 뜹니다.

4-4. 60초 이상 신호가 끊기면 자동 일시정지

랩탑을 닫거나 인터넷이 끊겨서 60초 이상 신호가 안 오면, 서버가 그 시점까지만 누적해두고 자동으로 일시정지 상태로 돌립니다. → 다시 들어오시면 그 지점에서 이어 갑니다.

4-5. 6시간 넘게 켜둔 세션은 자동 종료

세션이 시작된 지 6시간이 지나면 자동으로 정리됩니다. (밤새 켜놓고 잊어버린 경우 대비)

💡 6시간은 "자동 종료 트리거"이지 "기록되는 시간"이 아닙니다. 누적 시간은 항상 선택한 시간(selectedDurationMs, 최대 180분)까지로 cap 되며, 자동 종료된다고 6시간이 통째로 히트맵에 들어가는 일은 없습니다.

5. 멀티탭 동기화

같은 계정으로 여러 탭을 열어둬도 하나의 세션으로 동작합니다.

• A 탭에서 시작 → B 탭에서도 같은 타이머가 보입니다.
• A 탭에서 일시정지 → B 탭도 즉시 일시정지로 바뀝니다.
• A 탭에서 종료 → B 탭에서도 완료 카드가 뜹니다.

⚠️ 단: 새로운 세션을 두 탭에서 동시에 시작 누르면 한 탭은 "이미 진행 중인 세션이 있습니다" 메시지가 뜹니다. (의도된 동작 — 한 사람당 한 세션)

6. 결과는 어디서 보나요?

6-1. 프로필 히트맵에 점이 찍힙니다

/@내아이디 프로필 → 히트맵 타일에 공부 시간에 따라 색 점이 찍힙니다.

⚠️ 1분 미만은 점이 안 찍힙니다. 자세한 이유는 아래 「오류 같지만 의도된 동작」 섹션 사례 1을 참고하세요.

6-2. 타일을 누르면 그날의 타임테이블이 펼쳐집니다

• 세로축 — 0시 ~ 24시 (KST 기준)
• 🟠 주황색 바 (fm-orange-50) — 그 시간대에 진행한 작업 모드(work) 세션
• 🔴 빨간색 바 (fm-red-50) — 잠금 모드(lock) 세션 (다이얼 활성 색과 동일한 톤으로 "강한 집중" 시각화)
• 파란 점 — 그 시간대에 출간한 글 (호버하면 카드 미리보기)
• 우측 상단 +/− 버튼으로 줌인·줌아웃 (총 8단계: 30 / 45 / 60 / 90 / 120 / 180 / 240 / 360px/h)
• 모달 영역 밖을 클릭하거나 Esc 로 닫습니다

💡 언제 타임테이블이 필요할까요?

• "그날 정말 몇 시부터 몇 시까지 집중했지?" 자기 돌아보기
• 잘 풀린 날의 시간대 패턴 찾기 (아침형 / 저녁형 자기 인지)
• 공부 직후 발행한 글과 시간 매칭

7. 정책 한눈에

8. ⚠️ 오류 같지만 사실 의도된 동작들

Focus Timer를 쓰다 보면 "어? 이거 버그 아닌가?" 싶은 순간이 옵니다. 대부분은 시간 기록이 망가지지 않도록 설계된 안전장치입니다. 자주 묻는 7가지를 모아두니, 비슷한 상황이 오시면 여기로 돌아오세요.

사례 1 ❓ "분명 1분 정도 공부했는데 히트맵에 점이 안 떠요"

증상: 타이머로 30초 ~ 1분 정도 짧게 돌렸는데, 새로고침해도 히트맵에 색 점이 안 보입니다. 타임테이블 모달을 열면 segment는 보이는데 색 점만 없어요.

원인 — 의도된 정책입니다.

히트맵의 점은 "유의미한 공부 시간" 을 보여주기 위한 시각화라서, 다음 임계치를 따릅니다.

1분 미만   → 점 없음 (level 0)
1시간 미만 → 🟡 주황 점 (level 1)
1~2시간   → 🟠 적주황 점 (level 2)
2시간 이상 → 🔴 빨강 점 (level 3)

왜 1분 미만은 제외하나요?

• 1초 / 5초짜리 세션이 점으로 찍히면 히트맵이 "노이즈로 가득" 차 보입니다.
• 실제 공부 패턴을 의미 있게 보기 위해 1분 을 최소 기준으로 잡았습니다.

확인하는 법

• 타임테이블 모달을 여시면 짧은 segment도 그대로 보입니다.
• "공부 안 한 게 아니라 점만 안 찍힌 거" 입니다.

💡 테스트하실 때는 1분 이상 돌려보세요. 그러면 즉시 색 점이 표시됩니다.

사례 2 ❓ "10초 안에 끄고 다시 켰는데 시간이 안 늘었어요"

증상: 시작 → 5초 만에 일시정지 → 다시 시작 → 5초 만에 일시정지. 이걸 반복했는데 누적 시간이 그대로입니다.

원인 — 10초 미만 segment 제외 정책.

• 각 segment(시작→일시정지 또는 시작→종료)가 10초 미만이면 그 segment 자체를 삭제합니다.
• 이전까지 누적된 시간은 영향 받지 않습니다 — 그 짧은 구간만 사라지는 거예요.

왜 이렇게?

• 클릭 노이즈(실수로 시작/일시정지 연타)가 DB에 쌓이는 걸 막기 위함
• 1~2초짜리 micro-segment가 100개 쌓이면 타임테이블이 읽을 수 없게 됩니다

시나리오로 보기

💡 30초 이상 진행하시면 누락 없이 누적됩니다.

사례 3 ❓ "1시간 세션인데 1시간 30분 공부했어요. 30분은 어디 갔나요?"

증상: 60분 세션을 시작했는데 한참 빠져서 1시간 30분을 했습니다. 누적이 60분에서 멈춰 있습니다.

원인 — 선택한 시간까지만 누적 정책. (cap)

• 시작할 때 고른 selectedDuration 이 곧 그 세션의 상한입니다.
• 남은 시간이 0초가 되는 순간 자동 종료됩니다. 그 뒤 더 공부한 시간은 새 세션을 시작하지 않는 한 기록되지 않습니다.

왜 이렇게?

• "30분 하려고 했는데 50분 됐네!" 같은 들쭉날쭉 기록을 피하기 위해서입니다. "선언한 시간 = 기록되는 시간" 으로 단순화했습니다.
• 더 길게 하고 싶으시면 시작 시 더 긴 시간 선택 또는 진행 중 +10분 연장 버튼을 활용해 주세요.

💡 마지막 5분이 남으면 +10분 버튼이 자동으로 등장합니다. 부족하다 싶으시면 그때 누르시면 됩니다.

사례 4 ❓ "잠금 모드에서 ESC 한 번 눌렀더니 일시정지됐어요. 다시 풀스크린 들어가도 자동으로 안 이어져요"

증상: 잠금 모드 중 ESC 키 한 번 눌렀더니 풀스크린 빠지면서 일시정지. 다시 풀스크린에 들어가도 알아서 재개되지 않습니다.

원인 — 의도된 동작입니다.

• 잠금 모드의 핵심은 "내가 의식적으로 시작 / 재개를 누른다" 입니다.
• 집중 흐름이 한 번 끊긴 신호로 보고, 다시 들어가도 명시적으로 이어서 버튼을 눌러야 재개됩니다.

자동 일시정지가 일어나는 트리거

⚠️ fullscreenExits 카운트는 풀스크린이 실제로 해제될 때(ESC 등)만 +1 됩니다. Cmd+Tab 같은 OS 레벨 앱 전환은 풀스크린 상태는 그대로라 카운트와 별개로 일시정지만 됩니다. (추후 집중 품질 지표로 활용 예정)

💡 끊기는 게 싫으시다면 잠금 모드 대신 작업 모드 를 쓰세요. 작업 모드는 다른 탭 가도 멈추지 않습니다.

사례 5 ❓ "랩탑 잠깐 닫았다가 열었더니 일시정지로 바뀌어 있어요"

증상: 잠깐 자리 비우려고 노트북을 덮었다가 30분 뒤에 열었더니 타이머가 일시정지 상태입니다. 그동안의 시간은 안 흘렀고요.

원인 — heartbeat grace 정책.

• 타이머가 도는 동안 클라이언트는 30초마다 서버에 "나 살아있어요" 신호(heartbeat) 를 보냅니다.
• 60초 이상 신호가 안 오면 서버는 "이 사용자 일시중단된 듯" 으로 판단하고, 마지막 신호 시점까지만 누적 한 뒤 자동 일시정지 상태로 돌립니다.

왜 이렇게?

• 노트북 덮고 잠든 사이 8시간이 그대로 카운트되는 걸 막기 위해서입니다.
• "실제 컴퓨터를 쓰고 있던 시간" 만 누적하는 게 더 정확한 공부 기록이라는 판단입니다.

시나리오

💡 잠깐 자리 비우신다면 노트북을 켜두고 가시거나, 명시적으로 일시정지 한 뒤에 다녀오세요.

사례 6 ❓ "23:50에 시작해서 00:30에 끝났는데 어제 / 오늘 어느 쪽에 들어가나요?"

증상: 자정을 넘긴 세션이 있을 때, 히트맵·타임테이블에 어느 날짜로 표시되는지 헷갈립니다.

원인 — 자정 분배 정책 (의도됨).

• 자정을 가로지른 segment는 시간 비례로 두 날에 나눠 들어갑니다.
• 위 예시: 23:50 ~ 24:00(10분) → 어제 / 00:00 ~ 00:30(30분) → 오늘 으로 분배

기준 시간대는 KST (한국 시간). 해외에서 접속하셔도 한국 자정을 기준으로 분배합니다. 그래야 한 사용자의 기록이 이동 중에도 일관되게 보입니다.

💡 타임테이블 모달은 하루 단위 (0시~24시 KST)로 자르므로, 자정 직전의 세션은 두 날의 모달에 각각 보일 수 있습니다.

사례 7 ❓ "탭을 두 개 열어놨는데 한쪽에서 시작 누르니 다른 쪽에 '이미 진행 중' 떴어요"

증상: 두 개의 탭 모두 Develog가 열려 있는 상태. A 탭에서 새 세션을 시작했는데, B 탭에서 시작 버튼을 누르려고 보니 이미 같은 타이머가 동기화되어 보이고, 만약 그래도 새로 시작을 시도하면 "이미 진행 중인 세션이 있습니다" 토스트가 뜹니다.

원인 — 한 계정당 동시 세션 1개 정책.

• 한 사람이 동시에 여러 세션을 만들 수 없도록 잠금이 걸려 있습니다.
• 같은 브라우저의 두 탭은 BroadcastChannel 로 즉시 상태가 동기화됩니다 — A 탭에서 시작/일시정지/종료한 결과가 B 탭에 그대로 반영됩니다.
• 다른 브라우저(예: A 탭은 Chrome, B 탭은 시크릿창)나 다른 기기에선 BroadcastChannel이 안 통하지만, 어느 쪽이든 시작을 시도하면 서버가 막아서 같은 토스트가 뜹니다.

그러면 두 탭에서 동시에 일시정지 누르면 어떻게 되나요?

• 먼저 처리된 쪽만 성공, 나머지는 "이미 처리됨" 토스트가 뜨고 서버 상태를 다시 가져옵니다.
• 결국 두 탭 모두 같은 상태로 수렴합니다.

💡 노트북 · 모니터 두 개 쓰셔도 좋습니다 — 한 세션이 두 화면에서 동시에 보이는 형태로 동작합니다.

9. 보너스 — 알면 편한 동작

9-1. 위젯 위치는 새로고침해도 유지됩니다

위젯을 드래그한 위치는 자동 저장됩니다. 모니터 해상도가 바뀌어도 화면 안쪽으로 자동 보정됩니다.

9-2. 마지막에 쓴 시간과 모드가 기억됩니다

직전 세션에서 60분 · 잠금 모드를 골랐다면, 다음에 위젯을 열어도 60분 · 잠금이 기본 선택입니다. 매번 다시 고르지 않아도 됩니다.

9-3. 풀스크린 잠금 모드의 라이트 / 다크 토글도 기억됩니다

밤에 다크 모드로 한 번 바꾸면 다음에도 다크로 시작됩니다.

9-4. 다른 페이지로 이동해도 작업 모드는 계속 돕니다

작업 모드 사용 중 글을 읽거나 새 글을 쓰셔도 타이머는 멈추지 않습니다. 잠금 모드는 그 반대(풀스크린 이탈 = 즉시 일시정지)입니다.

9-5. 종료 버튼은 두 번 눌러야 합니다

■ 버튼 → "정말 종료할까요?" → 종료 한 번 더 누름. 한 번 누르고 5초 안에 두 번째를 안 누르면 자동으로 취소됩니다. (실수 방지)

9-6. 잠금 모드 패널은 접을 수 없습니다

작업 모드는 패널 우상단에 X 버튼이 있어 펼친 패널을 다시 FAB로 접을 수 있습니다. 잠금 모드는 X 버튼이 사라집니다 — 강한 집중을 위해 패널이 항상 펼쳐진 상태로 유지됩니다.

10. 자주 묻는 질문

Q. 모바일에서도 쓸 수 있나요?

위젯 자체는 데스크톱(768px 이상)에서 보입니다. 모바일 전용 UI는 추후 추가 예정입니다.

Q. 어디까지 자동 저장되나요?

세션 ID, 시작 시각, 일시정지 / 재개 / 종료 시각, 모드, 풀스크린 이탈 횟수까지 전부 서버에 저장됩니다. 새로고침해도 그대로입니다.

Q. 일시정지하고 한참 뒤에 와도 이어 가나요?

네, 일시정지 상태는 6시간 자동종료 한도 안에서는 무기한 유지됩니다.

Q. 세션 도중 인터넷이 끊기면요?

60초 이상 신호가 끊긴 시점까지 누적이 보존되고, 다음에 접속하시면 일시정지 상태로 복원됩니다.

Q. 짧게 끄고 다시 켰는데 시간이 안 늘었어요

10초 미만 단편은 클릭 노이즈로 보고 제외합니다. 30초 이상 공부하셨다면 누적됩니다. 자세한 동작은 사례 2 참고.

Q. 종료까지 했는데 히트맵에 안 보여요

다음 순서로 확인해 주세요.

1. 세션이 정말 종료까지 갔나요? 일시정지 상태는 히트맵에 안 들어갑니다.
2. 1분 이상 진행했나요? 1분 미만은 색 점이 안 찍힙니다 (사례 1).
3. 새로고침을 했나요? 종료 직후엔 한 번 새로고침이 필요할 수 있습니다.
4. 위 모든 조건을 만족했는데도 안 보인다면 — 버그입니다. 아래 신고 링크로 알려주세요.

✅ 정리 — 두 가지 원칙만 기억하세요

Focus Timer의 모든 "이상한 동작" 은 결국 두 가지 원칙에서 나옵니다.

1. 선언한 시간 = 기록되는 시간
2. 실제로 컴퓨터 앞에서 보낸 시간만 기록 (heartbeat / fullscreen guard)

이 두 원칙을 알고 계시면, 앞으로 만나실 모든 케이스가 "아, 그래서 그렇구나" 로 정리됩니다.

권장 활용법

1. 하루 한 번, 30분 세션부터 시작하세요. 일주일 뒤 타임테이블이 채워지면 신기해서 계속 누르게 됩니다.
2. 마감이 임박했다면 잠금 모드. 풀스크린 자동 일시정지가 SNS 충동을 즉시 잡아줍니다.
3. 완료 카드의 정리하기 버튼을 적극 사용하세요. 공부 직후 5분 내 작성한 글이 가장 정확하고 풍부합니다.
4. 주 1회 타임테이블을 돌아보세요. "이번 주 가장 집중한 시간대" 를 발견하면 다음 주 스케줄링이 쉬워집니다.
5. 기능 개선 및 에러 신고: https://forms.gle/eaUjYXQcuau3AKZj8

📖 develog 전체 시리즈 → develog 사용가이드 시리즈