Skip to content

docs: README에 주요 기능 시연 GIF 추가 #338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mindaaaa merged 1 commit into from
Apr 30, 2026
+116 −14
Merged

docs: README에 주요 기능 시연 GIF 추가 #338

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 116 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,132 @@
<div align="center">

<img src="https://i.imgur.com/BVS8cFI.gif" alt="Locus 배너" width=1000>
<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="main-mobile" src="https://github.com/user-attachments/assets/aa76fd2d-acc4-4f8e-8640-2de3b50b1b1f" /> | <img width="560" loading="lazy" alt="main-readme-desktop" src="https://github.com/user-attachments/assets/36cb102a-8ba9-4a9b-b5db-51d238de3c90" /> |

</div>

<div align="center">
<h1>
<img src="https://readme-typing-svg.demolab.com?font=Noto+Serif+KR&weight=600&size=18&color=FF7849&center=true&vCenter=true&width=720&height=60&duration=3200&pause=900&lines=Locus%2C%20%EB%9D%BC%ED%8B%B4%EC%96%B4%EB%A1%9C%20%27%EC%9E%A5%EC%86%8C%27;%EA%B7%B8%EB%A6%AC%EA%B3%A0%2C%20%EC%83%9D%EA%B0%81%EC%9D%B4%20%ED%83%9C%EC%96%B4%EB%82%9C%20%EC%9E%90%EB%A6%AC;%EC%A7%80%EB%8F%84%20%EC%9C%84%EC%97%90%20%EC%82%AC%EC%9C%A0%EB%A5%BC%20%EA%B3%A0%EC%A0%95%ED%95%98%EB%8B%A4" alt="Locus" />
</h1>

<p>
<b>그날의 공기와 장소까지 함께 기록하는 공간 기반 기록 서비스.</b>
<br />
<sub>걸어온 길 위의 사유들을 지도에 단단히 고정하고,<br />
그 자리에 다시 섰을 때 가장 생생한 모습으로 되살립니다.</sub>
</p>

<br>

> **생각이 태어난 장소를 기억하고,
> 그 생각으로 다시 돌아갈 수 있도록 돕는 공간 기반 기록 서비스**
<br />

<p>
<a href="https://www.figma.com/design/0PFs4g91g1UMxzWqOROtZt/Lucus-%E2%80%94-Full-App-UI?node-id=2-6"><img src="https://img.shields.io/badge/Figma_디자인-F24E1E?style=for-the-badge&logo=figma&logoColor=white" alt="Figma" /></a>
<a href="https://www.notion.so/WEB06-2c3d67b99e8080968cb9ccf26f1b2d2f"><img src="https://img.shields.io/badge/Notion_워크스페이스-000000?style=for-the-badge&logo=notion&logoColor=white" alt="Notion" /></a>
<a href="https://github.com/boostcampwm2025/web06-locus/wiki"><img src="https://img.shields.io/badge/프로젝트_위키-6B5B95?style=for-the-badge&logoColor=white" alt="wiki" /></a>
</p>

</div>

<br />

</div>

---

## 🗺️ What is Locus?

기록은 텍스트가 아니라, 그날의 *공기와 장소*로 완성됩니다.
우리는 매일 수많은 생각을 하지만, 대부분은 휘발됩니다.
메모 앱을 뒤져봐도 그때 왜 이런 생각을 했는지 기억나지 않는 이유는 `맥락`이 사라졌기 때문입니다.
**Locus**는 네이버 지도 위에 기록을 핀으로 고정하고,
같은 장소의 서로 다른 날에 떠오른 생각을 서로 연결하는 **공간 기반 기록 웹앱**입니다.

<br />

메모 앱 속 한 줄은 쉽게 휘발됩니다.
그때 왜 이런 생각을 했는지 기억나지 않는 이유는, 그 생각이 태어난 `맥락`이 사라졌기 때문입니다.

_Locus는 생각이 태어난 `장소(Locus)`를 기록의 중심에 둡니다._
걸어온 길 위에 사유를 단단히 고정해두면, 다시 그 자리에 섰을 때 기록은 가장 생생한 모습으로 되살아납니다.

---

## 🔧 주요 기능

### 1. 지도 홈

현재 위치와 영역 내 기록을 **핀**으로 표시하고, 밀집되면 자동으로 **클러스터**됩니다.
지도 빈 곳을 눌러 바로 새 기록을 남기거나, 장소 검색으로 핀을 옮겨 작성할 수 있습니다.

> 지도를 움직여, 그날의 자리에 다시 서보세요.

<sub>🐤 _가끔 지도 위를 지나가는 오리 캐릭터가 짧은 말풍선을 건넵니다._</sub>

<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="map-mobile" src="https://github.com/user-attachments/assets/34d0b8fd-c7f0-4e50-b915-62d6c20822c0" /> | <img width="560" loading="lazy" alt="map-desktop" src="https://github.com/user-attachments/assets/f96e82b6-0bd1-4033-bfe3-2525e206752d" /> |

</div>

### 2. 기록 작성

제목·본문·**태그**·**사진**을 담고, 위치는 지도 위 좌표·현재 위치·검색 결과 중 하나로 고정합니다.

> 이 자리에서 떠오른 한 줄을 남겨보세요.

_Locus는 생각이 태어난 `장소(Locus)`를 기록의 중심에 둡니다._
<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="create-mobile" src="https://github.com/user-attachments/assets/325515cc-6d98-4233-a4ba-fc08986af888" /> | <img width="560" loading="lazy" alt="create-desktop" src="https://github.com/user-attachments/assets/14c39d3e-8a06-49cc-9e23-579be7a127c3" /> |

</div>

단순히 글을 남기는 것을 넘어, 당신이 걸어온 길 위의 사유들을 지도 위에 단단히 고정하세요.
훗날 그 장소에 다시 섰을 때, 당신의 기록은 가장 생생한 모습으로 되살아날 것입니다
### 3. 기록 목록·상세·검색

**목록**에서 최신순·즐겨찾기 순으로 훑고, **검색**으로 제목·본문에서 빠르게 찾을 수 있습니다.
**상세** 화면에서는 전체 내용과 함께 연결된 기록의 흐름까지 이어볼 수 있습니다.

> 지난 생각을 다시 만나보세요.

<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="list-mobile" src="https://github.com/user-attachments/assets/818ba9f9-2106-4d23-89d3-1b245c6ca8ee" /> | <img width="560" loading="lazy" alt="list-desktop" src="https://github.com/user-attachments/assets/ea7395c3-2dbe-4157-830b-f5f06260857a" /> |

</div>

### 4. 기록 연결

두 기록을 **연결**하면 지도 위에 관계가 **선**으로 그려집니다. **연결 모드**에서 새 관계를 만들거나, 상세 화면에서 정리할 수 있습니다.

> 같은 자리, 다른 날의 두 생각을 이어보세요.

<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="connect-mobile" src="https://github.com/user-attachments/assets/8f8d1e80-3003-4a5f-b387-712785bf750a" /> | <img width="560" loading="lazy" alt="connect-desktop" src="https://github.com/user-attachments/assets/943b304d-e79c-4e9d-8d25-4e73608814b5" /> |

</div>

### 5. 설정·알림·계정

**알림**을 켜고 받을 **시간대**를 고르거나 **태그**를 정리할 수 있습니다. 첫 방문 시 짧은 **온보딩**이 서비스 흐름을 안내합니다.

> 잊지 않도록, 다시 떠올릴 시간을 정해두세요.

<div align="center">

| 모바일 | 데스크톱 |
| :---: | :---: |
| <img width="280" loading="lazy" alt="settings-mobile" src="https://github.com/user-attachments/assets/f0c1ee1f-259b-4607-afe5-d64b30b7f81b" /> | <img width="560" loading="lazy" alt="settings-desktop" src="https://github.com/user-attachments/assets/9100b7e2-b46f-407e-9a8d-f6b8feb731b2" /> |

</div>

<sub>※ 알림 설정은 PWA 설치 환경에서 활성화됩니다.</sub>

---

Expand Down Expand Up @@ -69,7 +171,7 @@ _Locus는 생각이 태어난 `장소(Locus)`를 기록의 중심에 둡니다._
![pnpm](https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=white)
![Turbo](https://img.shields.io/badge/Turbo-5C1678?style=for-the-badge&logo=turbo&logoColor=white)

## </div>
</div>

## 인프라 아키텍처

Expand All @@ -92,7 +194,7 @@ _Locus는 생각이 태어난 `장소(Locus)`를 기록의 중심에 둡니다._
- 개발 편의성을 위해 주요 서비스를 하나의 Web Server 서브넷 내에서 관리하며 신속한 반복 개발이 가능하도록 구성했습니다.
</details>

> 상세한 설계 결정 과정은 [운영 인프라 설계 (NCP)](위키_링크)에서 확인하실 수 있습니다.
> 상세한 설계 결정 과정은 [운영 인프라 설계 (NCP)](https://github.com/boostcampwm2025/web06-locus/wiki/%EC%9A%B4%EC%98%81-%EC%9D%B8%ED%94%84%EB%9D%BC-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98-%EC%84%A4%EA%B3%84)에서 확인하실 수 있습니다.

---

Expand Down
Loading