좋은 순간을, 마음에 드는 구도로.
DearShot은 현재 카메라에 보이는 장면을 분석하고, 장소에 어울리는 사진 구도와 촬영 가이드를 제공하는 Android 카메라 앱이다.
바다나 카페처럼 예쁜 장소를 발견해도 막상 누군가의 사진을 찍으려면 고민이 생긴다. 사람을 어디에 배치해야 할지, 배경은 얼마나 담아야 할지, 어느 거리에서 찍어야 할지 쉽게 결정하기 어렵다.
참고할 사진을 찾아보더라도 그 구도를 지금 눈앞의 장면에 적용하는 과정은 촬영하는 사람의 몫이다.
DearShot은 이 간격을 줄이기 위해 기획했다. 현재 장소에 맞는 예시 사진을 추천하고, 카메라 화면 위에 구도 가이드를 표시해 사용자가 직접 따라 찍을 수 있도록 돕는다.
촬영 후에는 결과를 확인하고, 다음 사진에서 바로 적용할 수 있는 짧은 피드백을 제공하는 것이 목표다.
템플릿 선택 → 오버레이를 참고한 촬영 → 결과 피드백으로 이어지는 초기 UI 시안.
앱의 중심은 카메라 화면이다. 예시 사진을 고르거나 피드백을 확인할 때도 촬영 흐름이 자연스럽게 이어지도록, 사진과 가이드가 화면의 중심에 남는 방향으로 설계했다.
크림색 배경과 테라코타 색상을 사용하고, 촬영 버튼과 선택 상태처럼 사용자가 바로 알아봐야 하는 요소에 강조색을 적용했다.
아래 화면과 애니메이션은 Figma에서 설계한 디자인·모션 시안이다. 현재 Android 앱에서 이 모든 기능이 구현된 것은 아니며, 실제 개발 과정에서 화면과 문구는 조정할 예정이다.
→ DearShot 전체 UI와 디자인 시스템 보기 · Figma
화면 안정 확인 → 장면과 객체의 단서 표시 → 추천 구도와 가이드 등장. Android 구현 전의 모션 미리보기다.
분석 결과를 기다리는 동안에도 사용자가 앱이 무엇을 보고 있는지 이해할 수 있는 화면을 만들고 싶었다.
먼저 카메라 화면이 안정됐는지 확인하고, 장면을 살펴보는 스캔 효과와 함께 인식한 키워드를 표시한다. 장소 정보는 상단에서, 객체 정보는 해당 객체의 위치 주변에서 확인할 수 있도록 구현할 계획이다.
추천이 완료되면 선택된 템플릿과 촬영 가이드가 나타나고, 사용자는 바로 촬영을 이어간다.
스캔 효과는 분석 중임을 알려주는 표현이다. 화면의 진행 단계는 실제 앱 상태에 연결하고, 아직 측정하지 않은 AI 처리 진행률을 임의의 퍼센트로 표시하지 않을 계획이다. 시안에 등장하는 단서의 종류도 실제 모델이 제공할 수 있는 정보에 맞춰 조정해야 한다.
카메라를 켜고 촬영할 장면을 비춘다.
화면이 안정되면 장면과 객체 정보를 분석한다.
현재 장면에 어울리는 촬영 템플릿 하나를 추천받는다.
예시 사진과 오버레이 가이드를 참고해 촬영한다.
촬영 결과에 대한 피드백을 확인하고 다시 찍는다.
마음에 드는 사진을 선택해 기기 갤러리에 저장한다.
카메라가 크게 이동하거나 촬영 장면이 달라지면 변화를 감지하고, 화면이 다시 안정된 뒤 새로운 추천을 요청하도록 설계한다.
초기에는 네 가지 장소 유형에 맞춰 구도를 준비했다.
장소 | 포함하는 환경 | 초기 구도 수 |
|---|---|---|
Water front | 바다, 호수, 강변 | 6개 |
Cafe | 실내 카페, 테이블이 있는 브런치 공간 | 6개 |
Green space | 공원, 정원, 잔디밭, 숲길 | 6개 |
Urban street | 거리, 광장, 캠퍼스, 건물 앞 | 6개 |
총 24개의 템플릿을 기준으로 시작한다. AI는 준비된 템플릿 후보에서 현재 장면에 적합한 구도를 선택하도록 구성했다.
추천받은 사진을 크게 확인하고, 카메라 화면에 표시된 가이드에 맞춰 인물의 위치와 크기를 조절하며 촬영한다.
촬영 결과에서 다음 사진에 적용할 핵심 개선점 하나를 전달한다. 사용자가 한 번에 이해하고 다시 촬영할 수 있는 피드백을 지향한다.
좋아요는 템플릿에 대한 전체 사용자의 반응을 나타내고, 북마크는 개인이 다시 참고하고 싶은 구도를 저장하는 용도로 구분한다.
DearShot은 온디바이스 분석과 서버의 AI 추천을 함께 사용하는 구조로 설계했다.
Android에서는 카메라 프레임을 처리하고, 장소와 객체를 분석해 화면에 키워드를 표시한다. 화면의 안정 여부와 장면 변화 감지도 기기에서 처리할 계획이다.
온디바이스 모델의 초기 후보는 ResNet18-Places365와 YOLOX-Nano다. Places365는 장소 후보와 확률을 얻는 데, YOLOX-Nano는 객체의 종류와 화면 내 위치를 얻는 데 사용한다. Android에서는 ONNX Runtime으로 실행하는 방향을 검토하고 있다.
화면이 안정되면 선택한 프레임과 분석 정보를 백엔드에 전달한다. 백엔드는 이 정보를 Gemini에 보내 준비된 템플릿 중 적합한 구도를 선택하고, 결과를 앱에 반환한다.
모델 선택은 실제 기기의 추론 속도와 정확도, 발열 등을 검증하면서 조정할 예정이다.
영역 | 사용 중이거나 도입할 기술 |
|---|---|
Android 개발 | Kotlin, Jetpack Compose |
화면 구조 | MVVM, ViewModel, StateFlow |
화면 이동 | Navigation 3 |
의존성 주입 | Hilt |
네트워크 | Retrofit, OkHttp, Kotlinx Serialization |
설정 저장 | DataStore |
카메라 · 온디바이스 분석 | CameraX, ONNX Runtime Android 도입 예정 |
백엔드 | Node.js, TypeScript, Express |
데이터베이스 | PostgreSQL, Drizzle ORM |
AI 추천 · 피드백 | Gemini API |
한국어와 영어를 지원하고, 국내 사용자뿐 아니라 해외 사용자도 이용할 수 있는 앱으로 배포하는 것을 목표로 한다.
이번 프로젝트에서는 Android 개발에 가장 많은 비중을 두려고 한다.
카메라 프리뷰가 동작하는 것에서 더 나아가, 프레임 분석과 네트워크 요청이 동시에 진행되는 상황에서도 촬영 화면이 자연스럽게 유지되도록 만드는 것이 중요하다.
특히 다음과 같은 문제를 직접 구현하고 검증해보고 싶다.
카메라 프리뷰를 유지하면서 온디바이스 추론을 실행하는 방법
작은 흔들림과 실제 장면 변화를 구분하는 기준
추천을 기다리는 동안의 화면 상태와 애니메이션
장면이 바뀐 뒤 도착한 이전 추천 결과를 처리하는 방법
촬영 사진의 임시 보관과 갤러리 저장 흐름
현재는 백엔드 API와 초기 촬영 템플릿을 준비하고, Android의 네트워크·인증 기반과 시작 화면을 연결하는 단계다.
이 시리즈에서는 DearShot을 개발하면서 무엇을 구현했는지뿐 아니라, 왜 그 구조를 선택했고 실제로 어떤 문제가 생겼는지를 함께 기록하려고 한다.
원문: Velog에서 읽기
