홈페이지에 서비스로 끼워넣었던 건축물조회 서비스를 앱으로 출시?해볼까 합니다. 물론 연습이지만요. ^^
로즈님이 3시간 넘게 열정적으로 강의해 주신 첫번째 영상을 다시 되짚어서 flutter와 android studio, stitch를 준비했습니다.
왜 하는가?
건축물정보를 확인하는 다양한 서비스들이 있습니다. 그런데 어떤 특정 데이터를 위해서 여러 곳을 찾아다녀야 합니다. 한번에 원하는 정보를 조회할 수 있는 방법을 찾고 있다가 직접 만들게 되었습니다.
어떻게 구현하는가?
법정동이름과 번지를 입력하면 해당 지번의 건축물 정보가 나타납니다.
동명은 대한민국 법정동 자료를 DB(postgreSQL)에 담아두고 조회하도록 합니다.
법정동이름과 번지를 조합한 pnu를 공공데이터포털과 Vworld에 전달하여 정보를 불러온 후 필요한 형태로 가공하여 보여줍니다. pdf 다운로드나 인쇄가 가능하도록 기능 구현하려고 합니다.
기존에 제 홈페이지에 구현되어 있는 내용입니다.
한국어가 포함된 웹페이지 스크린샷
한국사이트 스크린샷
우선 stitch에서 간단하게 작업을 진행해 봤습니다. 연습이니까 일단 디자인이나 글씨체는 나중에 편집하려고 합니다.
호텔 ui 디자인 한국어 호텔 ui 디자인 한국어 호텔 ui 디자인 한국어 호텔 u
프로젝트 다운로드 하고 폴더를 만들고 클로드코드에게 구현을 시켰습니다.
메시지가 표시된 검은 화면의 스크린샷
그런데 가상서버에 있는 코드들을 구동시킬 수가 없으니 불러와야 하는데 어떻게 해야하는지 "그냥(?)클로드"에게 물어봤습니다.
https://claude.ai/share/bc399386-4e37-4712-b390-ab30c50f5686
MCP를 활용해서 방법을 알려주는데요. 사실 아직 MCP를 써본 적이 없습니다. 그래도 한번 따라해 볼까 합니다. 서버와 내 pc에 각각을 실행해 줍니다.
서버에 명령어를 잘못 알려줬네요. 이게 맞답니다.
npm install -g @modelcontextprotocol/server-filesystem클로드코드를 다시 실행합니다.
될지 모르겠지만 이렇게 프롬프트를 넣어봤습니다.
> @design\ 폴더의 디자인 대로 flutter 프로젝트를 @code\ 폴더에 구현해 줘. 내 서버에서 구현중인 코드를 활용할꺼야. root@goldenrabbit:/home#의 데이터를 사용할거고, 현재 mcp로 연결해 뒀어. 구체적으로는 https://goldenrabbit.biz/property-manager/public/ 에서 구현되는 내용이야.
플랜모드로 구체적인 구현방법을 제시하여 적절한 방향을 설정해 줬습니다.
한국어 프로그램 스크린샷
하지만 역시나 MCP가 한번에 연결되지는 못하나보네요. 우선 디자인부터 하고 서버는 나중에 연결하겠답니다.
[2탄]
MCP 서버 연결이 안되는데 프롬프트를 직접 입력해서 json 파일을 만들라고 하네요.
claude mcp add cafe24-server -- ssh [email protected] "npx -y @modelcontextprotocol/server-filesystem /home"이제 정상적으로 MCP 서버 연결이 된 것 같습니다.
이제 다시 작업을 시작합니다. 시간이 많이 걸리네요.
구체적인 계획을 세워줍니다. 총 6단계로 진행하는 플랜입니다.
Flutter 건축물 검색 앱 구현 계획
프로젝트 개요
목표: C:\Building_Service_App\code\ 폴더에 디자인 파일을 기반으로 Flutter 앱 구현
백엔드: Python Flask 서버 (https://goldenrabbit.biz/property-manager/)
디자인 참고: C:\Building_Service_App\design\ 폴더의 HTML/CSS 파일
기술 스택: Flutter + Riverpod + Dio + VWorld Maps
사용자 선호 설정
- 상태 관리: Riverpod (코드 생성 포함)
- 지도: 서버의 VWorld API 활용
- 인증: 공개 검색만 지원 (로그인 불필요)
- 로컬 저장소: SharedPreferences + Secure Storage
---
1. 프로젝트 구조
building_service_app/
├── lib/
│ ├── main.dart
│ ├── app.dart
│ ├── core/
│ │ ├── theme/
│ │ │ ├── app_theme.dart # 전체 테마 설정
│ │ │ ├── app_colors.dart # 색상 정의
│ │ │ └── app_text_styles.dart # 텍스트 스타일
│ │ ├── network/
│ │ │ ├── api_client.dart # Dio HTTP 클라이언트
│ │ │ ├── api_endpoints.dart # API 엔드포인트 정의
│ │ │ └── api_exception.dart # 에러 처리
│ │ ├── constants/
│ │ │ └── app_constants.dart # 상수 정의
│ │ └── widgets/
│ │ ├── premium_button.dart # 커스텀 버튼
.
.그리고 디테일한 구현을 시작합니다.
중간중간 오류가 나서 방향을 전환하는 것 같은데.. 괜찮은건지 잘 모르겠네요.
테스트도 진행하면서 오류를 고쳐나가네요.
1주차 계획을 마무리했다고 합니다.
Week 1: 프로젝트 설정 및 기반 작업
1. Flutter 프로젝트 생성 (flutter create building_service_app)
2. 폴더 구조 생성
3. pubspec.yaml 의존성 추가
4. 한글 폰트 다운로드 및 assets 설정
5. 테마 시스템 구현 (app_theme.dart, app_colors.dart, app_text_styles.dart)
6. API 클라이언트 구현 (api_client.dart, api_endpoints.dart, api_exception.dart)
. . .
다음 단계 (Week 2)
1. Repository 및 Datasource 구현
2. Riverpod Provider 설정
3. Storage Service 구현 (검색 기록)
4. 검색 화면 UI 시작
현재 프로젝트는 컴파일 가능한 상태이며, 테마와 기본 구조가 완성되어 Week 2 작업을 시작할 준비가 되었습니다!4주차까지 진행이 되었다고 합니다. (계획은 6단계였는데, 4단계에서 마무리되었네요.)
파워쉘에서 진행해 보겠습니다.
역시 한번에는 안됩니다.
오류 메시지를 보여주는 컴퓨터 화면의 스크린샷
커멘드 창에서 에러난 내용을 전달했습니다. 수정했다고 하는데요.
이제 화면이 제대로 나옵니다.
컴퓨터 화면에 표시된 한국어 앱 스크린샷
하지만 행정구역 검색은 안되네요.
DB에 저장된 행정구역에서 데이 터를 불러와서 검색하도록 설정했었는데, 그 부분이 제대로 구현이 안된 것 같습니다.
[3탄]
추가 문제가 되는 부분을 수정했습니다. 여러번 요청을 거듭했지만, 이전에 만들었던 것보다 못합니다. 데이터를 제대로 불러오지 못하고 있네요. 처음 생각했던 디자인과도 너무 다르고..
좀더 디테일하게 수정요청을 했습니다. 내용을 수정하고 빌드까지 테스트합니다.
> 지금 building service app이 서버의 /home/webapp/goldenrabbit/backend/property-manager에서 사용하고 있는 구조를 얼마나 반영하고 있는지 알려줘. 해당 구조는 건축물정보에 '기본 정보', '건물 정보', '토지 정보', '전유부 정보' 등을 표시하게 되어 있는데, 지금 디자인이 고정되어 있어서 이런 구조를 반영하지 못하고 있는 것 같아. 현재 디자인의 틀을 변형해서 서버에서 보여주는 정보들을 모두 보여주고, 서버에서 구현하는 형태대로 인쇄도 설정될 수 있도록 수정하고, 지금 일부 데이터가 반영되지 않는 것들도 (예를들어 건폐율, 용적률 등등) 모두 반영될 수 있도록 해줘.
● 현재 앱의 구조를 파악했습니다. 이제 서버와 비교 분석을 진행하겠습니다.
● 서버와 앱 간의 구조 차이 분석 결과
서버의 print_multi_unit.html 템플릿과 현재 Flutter 앱을 비교한 결과, 큰 차이가 있습니다:
현재 앱을 서버 구조에 맞게 수정하겠습니다.
● 이제 서버의 상세한 구조를 반영하여 모델을 수정하겠습니다. 먼저 building_response_model.dart에 누락된 필드들을 추가합니다:
● 분석 결과 대부분은 deprecation warning이고, 중요한 에러는 없습니다. 이제 앱을 실행해서 작동하는지 확인해보겠습니다. 먼저 간단히 빌드하여 심각한 오류가 있는지 확인합니다:
● bodySmall에 fontWeight 파라미터가 없어서 빌드 실패했습니다. info_section.dart를 수정합니다:
● 모든 작업이 완료되었습니다! 이제 요약해드리겠습니다.
작업 완료 요약
서버의 /home/webapp/goldenrabbit/backend/property-manager 구조를 Flutter 앱에 완전히 반영했습니다:완료했다고 하니 다시 해보겠습니다.
수정이 된 것 같습니다. 내용을 좀더 수정해봅니다.
> 잘 반영된 것 같아. 일부 수정하고 싶어. 하단에 뒤로가기 버튼이 있으면 좋겠어. 항목/값 형태에서 '항목'의 폭이 동일하게 고정되었으면 좋겠어. 가장 긴 항목이 다섯글자이니까 6글자 들어가는 폭 정도로. 토지정보의 순서를 [토지면적, 용도지역, 공시지가, 기준년도] 순서로 바꾸고 싶어. 지도가 표시가 안되는데 수정해 줘.
지도 표시가 무제네요. 웹과 앱 모두에서 구현되도록 하려니 안되는 부분이 있는 것 같습니다.
● 조건부 import가 제대로 작동하지 않네요. 더 간단한 방법으로 수정하겠습니다. Web과 Mobile 코드를 하나의 파일에 통합하겠습니다.
● 이제 WebViewController를 dynamic으로 처리하고, Web에서는 사용하지 않도록 수정하겠습니다:
● 이제 다시 Web 빌드를 테스트하겠습니다:
● 빌드 성공! 이제 Chrome에서 실행하여 지도가 제대로 표시되는지 테스트하겠습니다:테스트 결과 깔끔하게 나옵니다. 그런데 역시 지도가 안 나타나네요.
게임 설정을 보여주는 화면의 스크린샷
웹페이지 만들 때도 가장 애를 먹었던 부분이 지도에 표시하는 부분이었는데, 역시나 쉽지 않습니다. 겨우 지도가 보이는데, 이번엔 해당 주소로 안가고 서울시청만 가리키고 있습니다. 하~~
To be continued ~~
