[DOCS] README 스크린샷 캡션 추가 및 한/영 문서 통일

[kimminna]

ISSUE 🔗

관련 이슈 없음

What is this PR? 🔍

README.md / README_ko.md에 스크린샷별 기능 설명 캡션을 추가하고, 로고·소개 이미지를 반영했으며, 두 문서의 이미지·캡션 구조를 동일하게 통일했습니다.

배경

• 기존 구조: "Why We Built It" / "Features" 섹션에 스크린샷만 나열되어 있고 각 이미지가 어떤 화면인지 설명하는 텍스트가 없었습니다.
• 발생 문제: 이미지와 텍스트 캡션 사이 여백이 markdown 빈 줄만으로는 prettier의 커밋 시점 자동 포맷팅(연속 빈 줄 → 한 줄 정규화)에 의해 사라졌고, README.md에서 먼저 반영한 이미지·캡션 구조가 README_ko.md에는 반영되지 않아 두 문서가 서로 어긋나 있었습니다.
• 해결 방향: 각 스크린샷 아래에 실제 화면 내용에 맞는 캡션을 붙이고, 여백은 실제 렌더링되는 <br/> 엘리먼트로 처리했으며, README.md에서 확정한 최종 구조를 README_ko.md에도 동일하게 반영했습니다.

Why We Built It / Features 섹션 캡션

• 변경 요약: Why We Built It(1장)과 Features(7장) 스크린샷 아래에 각 화면에 맞는 영어·한글 캡션을 추가했습니다.
• 이유: 스크린샷만 나열되어 있어 각 이미지가 어떤 기능을 보여주는지 문서만 보고는 알 수 없었습니다.
• 구현 방식: 각 이미지 아래에 볼드 타이틀 + 설명 형태의 불릿 한 줄을 배치했습니다 (예: - **📝 Todo + Time Estimate**: ...). Why 섹션은 이미지 1장과 기존 3개 불릿 설명의 개수가 맞지 않아, 이미지 아래에 기존 3개 불릿 텍스트를 그대로 복원해 배치했습니다.

이미지-설명 간 여백

• 변경 요약: 이미지와 캡션 사이 시각적 여백을 <br/> 태그 두 줄로 추가했습니다.
• 이유: 마크다운 빈 줄만 추가했을 때는 prettier가 커밋 시 연속 빈 줄을 한 줄로 정규화해 diff가 사라지고 여백도 사라졌습니다.
• 구현 방식: 빈 줄 대신 실제 렌더링되는 <br/> 엘리먼트를 이미지-캡션 사이에 두 번 배치해 prettier 포맷팅 이후에도 여백이 유지되도록 했습니다.

로고 및 소개 이미지

• 변경 요약: 상단에 로고 이미지, "Timo란?/What Is Timo?" 섹션에 소개 스크린샷을 추가했습니다.
• 이유: 텍스트만 있던 인트로 영역에 실제 화면을 보여줘 문서 진입 시 서비스를 바로 이해할 수 있도록 했습니다.
• 구현 방식: <div align="center"> 내부 최상단에 100x100 로고 이미지를, 소개 문단 앞뒤로 <br />을 두고 1440x929 스크린샷을 배치했습니다.

팀원 프로필 및 한/영 동기화

• 변경 요약: 팀원 프로필 사진을 기존 GitHub 아바타({username}.png) 대신 새로 업로드한 이미지로 교체하고, 모든 이미지·캡션 구조를 README.md와 README_ko.md 양쪽에 동일하게 반영했습니다.
• 이유: 영문/한글 문서가 서로 다른 이미지·캡션 구조를 갖고 있어 두 문서 간 정보가 어긋나 있었습니다.
• 구현 방식: README.md에서 먼저 확정한 최종 구조(이미지 URL, <br/> 배치, 캡션 문구)를 README_ko.md에 그대로 옮기고 캡션만 한글로 번역했습니다.

To Reviewers

이미지는 모두 비공개 저장소의 GitHub user-attachments URL이라 저장소 접근 권한 없이는 렌더링 확인이 어려울 수 있습니다. Features 섹션 캡션 문구는 작성자(김민아)님이 직접 알려준 각 스크린샷 내용을 기반으로 작성했습니다.

Screenshot 📷

Test Checklist ✔

• git diff develop...HEAD 로 변경 범위가 README.md, README_ko.md 두 파일로 한정됨을 확인
• 커밋마다 lint-staged(prettier) 통과 확인
• pnpm lint / pnpm check-types — 미실행: 마크다운 문서 전용 변경이라 대상 파일 없음

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
timo	Ready	Preview, Comment	Jul 17, 2026 8:00am

[coderabbitai]

Walkthrough

영문 및 국문 README의 로고, 소개·기능 설명, 팀원 프로필 이미지를 새 이미지와 재구성된 콘텐츠로 업데이트했습니다.

Changes

README 문서 개편

Layer / File(s)	Summary
소개 콘텐츠와 브랜딩 이미지 README.md, README_ko.md	상단 로고 이미지를 추가·교체하고 Timo 소개, 제작 배경, 주요 기능 섹션의 문구·이미지·기능 항목 구성을 변경했습니다.
팀원 프로필 이미지 README.md, README_ko.md	팀원 프로필 이미지를 기존 GitHub 아바타에서 새 user-attachments 이미지로 교체하고 이미지 속성을 갱신했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	캡션 추가와 한/영 README 통일이라는 이번 변경의 핵심을 잘 요약합니다.
Description check	✅ Passed	README 두 문서의 이미지·캡션·구조 통일과 로고/소개 이미지 추가가 설명과 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/root/readme-update

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Timo Performance Report

Bundle Size — timo-web

라우트	크기	First Load JS
/[locale]/home	214.25 kB	🔴 420.14 kB
/[locale]/today	198.41 kB	🔴 404.30 kB
/[locale]/focus	162.09 kB	🔴 367.98 kB
/[locale]/settings	168.92 kB	🔴 374.81 kB
/[locale]/statistics	155.83 kB	🔴 361.72 kB
/[locale]/[...rest]	0 B	🟡 205.89 kB
/[locale]/login	213.91 kB	🔴 419.80 kB
/[locale]/oauth/calendar/callback	120.93 kB	🟡 326.82 kB
/[locale]/oauth/callback	120.60 kB	🟡 326.49 kB
/[locale]/onboarding	234.66 kB	🔴 440.55 kB
/[locale]	119.91 kB	🟡 325.80 kB
/[locale]/policy	126.04 kB	🟡 331.93 kB
/robots.txt/route	0 B	🟡 205.89 kB
/sitemap.xml/route	0 B	🟡 205.89 kB

공유 번들: 205.89 kB
🟢 < 200kB  |  🟡 < 350kB  |  🔴 ≥ 350kB (First Load JS · gzip)

Lighthouse — timo-web

URL	Perf	A11y	LCP	CLS	TBT
/en/home	🟡 72	🟢 95	🔴 15.8s	🟢 0.000	🟢 195ms
/en/today	🔴 66	🟢 95	🔴 15.6s	🟢 0.000	🟡 360ms
/en/focus	🟡 73	🟢 95	🔴 15.6s	🟢 0.000	🟢 140ms
/en/statistics	🔴 61	🟢 95	🔴 15.2s	🟢 0.000	🟡 548ms

Perf ≥ 70 / A11y ≥ 85 목표
LCP 🟢 < 2.5s 🟡 < 4s 🔴 ≥ 4s  |  CLS 🟢 < 0.1 🟡 < 0.25 🔴 ≥ 0.25  |  TBT 🟢 < 200ms 🟡 < 600ms 🔴 ≥ 600ms

Image Optimization — timo-web

파일	크기	포맷	상태
favicon.png	27.84 kB	PNG ⚠️	🟢
images/google-calendar.png	36.20 kB	PNG ⚠️	🟢
images/google-logo.png	26.79 kB	PNG ⚠️	🟢
og.png	437.44 kB	PNG ⚠️	🟡

총 4개 · 528.28 kB  |  🟢 < 200KB  |  🟡 < 500KB  |  🔴 ≥ 500KB
⚠️ 4개 파일 WebP/AVIF 변환 권장

측정 커밋: 63c05ac

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

README.md (1)

182-209: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

팀원 이미지 크기를 줄여 표 폭을 맞춰주세요.
README.md#L182-L209, README_ko.md#L180-L207의 4개 이미지가 원본 해상도(1276x2032)로 표시돼 표가 과도하게 넓어집니다. 160x255 정도로 맞추면 레이아웃이 훨씬 안정적입니다. MDN <img> 문서도 같이 보면 좋습니다: https://developer.mozilla.org/docs/Web/HTML/Element/img
작은 손질이지만 README가 덜 “가로로 우주확장”됩니다. 😄

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 182 - 209, Resize the four team-member images in
README.md (lines 182-209) and README_ko.md (lines 180-207) from 1276x2032 to
approximately 160x255 by updating their img dimensions, preserving the existing
table structure and links.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@README.md`:
- Around line 2-3: Replace the generic alt text on the logo, screenshot, and
profile images in README.md lines 2-3 with consistent English descriptions of
each image’s purpose; apply equivalent Korean purpose descriptions to the
corresponding images in README_ko.md lines 2-3.

---

Outside diff comments:
In `@README.md`:
- Around line 182-209: Resize the four team-member images in README.md (lines
182-209) and README_ko.md (lines 180-207) from 1276x2032 to approximately
160x255 by updating their img dimensions, preserving the existing table
structure and links.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 318c769a-f725-43aa-9cfe-03ae6a100a2d

📥 Commits

Reviewing files that changed from the base of the PR and between fd06b80 and 542494d.

📒 Files selected for processing (2)

• README.md
• README_ko.md

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

두 README의 이미지 대체 텍스트를 이미지 목적에 맞게 통일해 주세요.

• README.md#L2-L3: 로고·스크린샷·프로필 이미지에 영어 목적 설명을 적용하세요.
• README_ko.md#L2-L3: 동일한 이미지들에 한국어 목적 설명을 적용하세요.

현재 alt="image"는 이미지 종류와 의미를 전달하지 못합니다. (w3.org)

📍 Affects 2 files

• README.md#L2-L3 (this comment)
• README_ko.md#L2-L3

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 2 - 3, Replace the generic alt text on the logo,
screenshot, and profile images in README.md lines 2-3 with consistent English
descriptions of each image’s purpose; apply equivalent Korean purpose
descriptions to the corresponding images in README_ko.md lines 2-3.

Source: MCP tools

[ehye1]

수고하셨습니다!