나만의 꽃 도감 만들기 2 - 프론트 화면 구현 1
프론트 화면 구성 w. Flutter
Section titled “프론트 화면 구성 w. Flutter”지난 편에 이어 이번에는 꽃을 검색하고 도감에 등록하는 기능을 가진 프론트 화면을 구현해보겠습니다.
프론트를 구성하는 프레임워크는 flutter를 선택하게 되었는데요, 이유는 다음과 같습니다.
- 모바일 앱 형태로 구현하고자 했기 때문에 모바일 플랫폼에 최적화된 프레임워크를 선택하고자 했습니다.
- 프론트 기술을 학습하고자 시작한 프로젝트가 아니기 때문에 AI의 도움을 최대치로 받을 수 있는 플러터를 선택했습니다.
- 다른 프론트 프레임워크들에 비해 비교적 배경지식이 있어 빠르게 프로젝트를 시작할 수 있을거라 판단했습니다.
화면 레이아웃 소개
Section titled “화면 레이아웃 소개”이 프로젝트는 기본적으로 3개의 화면으로 구성되어 있습니다.
가장 먼저 꽃을 검색할 수 있는 화면이 있어야할 것이고, 다음으로는 꽃을 등록하는 화면이 있어야할 것이고, 마지막으로는 유저의 꽃 도감 리스트를 볼 수 있는 화면이 있어야할 것입니다.
일단 간단하게 Keynote로 꼭 필요한 UI를 기준으로 화면 레이아웃을 구성해봤습니다.
그리고 Cursor에게 화면 구현을 요청할 것이기 때문에 각 화면별 버튼이나 기능을 자세하게 정의해줬습니다.
저는 맨 처음 보여지는 화면은 꽃을 검색하는 화면이 될 것이고, 이 화면은 최대한 깔끔했으면 좋겠다고 생각했습니다.
왜냐하면 야외에서 꽃을 검색하는데 중요한 포인트는 간편함 + 간략함이기 때문입니다.
그래서 바로 꽃을 찍을 수 있는 카메라 열기 버튼 하나만 놔두고, 사진을 찍은 후에 사진 미리보기, 꽃 이미지 검색, 도감 등록 UI가 보여야한다고 정의했습니다.
다음으로 도감 등록 버튼을 누르면 도감을 등록하는 화면으로 넘어가야하는데요, 이 화면에서는 1편에서 정리한 데이터 검색이 필요할 것이라고 생각했습니다.
예를 들어 첫번째 화면에서 찍은 사진이 꽃 이미지 검색을 통해 해바라기라는 사실을 알게되었다면, 도감 등록에서 꽃 데이터 검색에 해바라기를 입력하는 플로우입니다.
이러면 미리 저장된 해바라기에 관한 데이터를 가져올 수 있을 것입니다. 추가로 메모를 같이 저장할 수 있게끔 했는데, 이는 사진을 찍은 장소나 날짜 등 기타 같이 저장하고 싶은 데이터가 있을 것 같다는 생각에 추가했습니다.
마지막으로 도감 등록 화면에서 등록한 꽃을 볼 수 있는 화면이 있어야하는데요, 이 화면에서는 꽃 이름, 꽃 이미지, 꽃 설명, 꽃 데이터 검색 결과, 메모 등을 볼 수 있어야합니다.
이 부분에서 처음 계획한 3개의 화면보다 하나가 더 추가되었는데요, 꽃 도감 리스트 화면과 꽃 도감 상세 화면을 분리했기 때문입니다.
사실 이렇게 화면을 구성하다보면 추가해야할 것 같은 기능들이 마구마구 떠오르기 시작하는데요, AI와 함께 개발하는 일명 바이브 코딩에서 중요한 핵심중에 하나는 작게 시작해야한다는 것입니다.
처음부터 너무 복잡한 요구사항을 요청하면 쉽게 코드가 더러워지고 걷잡을 수 없게 되기 때문입니다. 따라서 저는 이정도로 정리한 후 Cursor에게 화면 구현을 요청했습니다.
이미지 검색 방식
Section titled “이미지 검색 방식”화면도 간단하고 요구사항도 나름 구체적으로 요청해서인지 UI 자체를 구현하는데는 크게 문제가 없었는데요, 문제가 되는 부분은 이미지 검색 기능이었습니다.
처음 이 프로젝트를 구상했을 때는 꽃 사진으로부터 어떤 꽃인지 알 수 있는 API가 있을 거라 생각했습니다. 그런데 그런 API는 존재하지 않았고, 흔히 사용하는 이미지 검색 API의 경우엔 찍은 사진이 꽃이라는 건 알지만 이게 장미인지, 국화인지는 구별하기 어려운 것으로 확인되었습니다.
그래서 저는 다른 방법을 찾아보기 시작했는데요, 그 방법 중 하나가 바로 구글 랜즈 를 활용하는 것이었습니다.
기존에도 네이버 이미지 검색을 통해 꽃 이름을 찾아보는 식이었는데 훨씬 정보가 많은 구글 랜즈를 활용할 수 있다면 더 좋을 것 같다는 생각이 들었습니다.
아이폰에서는 이미지를 공유할 때 구글앱을 선택하면 자동으로 구글 랜즈로 열리는 기능이 있는데요, 이 기능을 활용해서 찍은 사진을 바로 구글 랜즈로 열 수 있게하면 사용자가 가장 정확하고 빠르게 꽃의 종류를 알아낼 수 있다고 판단했습니다.
실제 개발된 화면 스크린 샷
Section titled “실제 개발된 화면 스크린 샷”
사진을 찍은 후 메인 화면
Section titled “사진을 찍은 후 메인 화면”
꽃 도감 등록 화면
Section titled “꽃 도감 등록 화면”
꽃 이미지 검색 클릭 후 공유 화면
Section titled “꽃 이미지 검색 클릭 후 공유 화면”
구글 랜즈 검색 화면
Section titled “구글 랜즈 검색 화면”
꽃 도감 리스트 화면
Section titled “꽃 도감 리스트 화면”
꽃 도감 상세 화면
Section titled “꽃 도감 상세 화면”
일차적으로 화면과 기능을 구현하긴 했지만, 디테일한 디자인이나 버튼 이름 등 아직 수정해야하는 부분이 너무 많게 느껴집니다.
다음 편에서는 조금 더 보기 좋게 디자인을 수정하고 버튼 이름도 직관적으로 느껴지게 끔 수정해볼 예정입니다.
그리고 아직은 서버를 개발하지 않았기 때문에 1편에서 가공한 데이터를 활용하지 못하는 상황입니다. 이 부분은 추후에 서버 개발 이후 API 연동을 하면서 추가해보도록 하겠습니다.