배경
- 아이 문제집 종류가 많아, 매번 외부로 갈 때 문제집을 가지고 가서 하는 것은 번거로움이 있음
- 스캔을 해서 PDF 로 만들어서 해당 PDF 를 가지고 문제를 풀고 싶음
- 가정용 스캐너로 많은 양의 스캔은 상당한 번거로움이 발생
- 전문 스캐너를 통해 스캔하는 방법은 별도의 비용이 발생되고 문제집을 전부 커팅해야 함
- 유사 앱이 존재하지만 무료버전에서는 제약이 존재하기 때문에 번거로움
목적
- 생활속에서 필요한 부분을 직접 구현을 해보자
- 직접 구현하기 보단 에이전트 방식의 개발로 진행을 통한 AI 시대의 개발 방법을 경험하자
사용 툴 및 LLM 모델
OpenCode 와 oh-my-opencode 를 활용github copilot 에서 제공하는 모델 사용
- gpt 5.2
- gpt 5-mini
- gpt 4o
- gpt 4.1
- claude opus 4.5
- 직접 생각 및 고민을 위해
google gemini 추가 활용
oh-my-opencode.json
{
"$schema": "<https://raw.githubusercontent.com/code-yeongyu/oh-my-opencode/master/assets/oh-my-opencode.schema.json>",
"agents": {
"sisyphus": {
"model": "github-copilot/gpt-5-mini"
},
"librarian": {
"model": "github-copilot/gpt-4.1"
},
"explore": {
"model": "github-copilot/gpt-5-mini"
},
"oracle": {
"model": "github-copilot/gpt-5-mini"
},
"frontend-ui-ux-engineer": {
"model": "github-copilot/gpt-4o"
},
"document-writer": {
"model": "github-copilot/gpt-4.1"
},
"multimodal-looker": {
"model": "github-copilot/gpt-4o"
}
}
}
개발 진행
1차) 최초 진행
- 카메라로 사진을 찍고, 해당 사진을 PC 로 이동하여 파이선으로 구현하여 cli 를 통해 진행하는 방식으로
OpenCode에게 요청.
- 문서 영역을 잡기 위해 OpenCV 기반 파이선 라이브러리 검토
- 문서 영역을 더 잘잡기 위해 딥러닝 기반 라이브러리 검토
- 어느정도 퀄리티가 나왔지만, 일부 사진을 픽해서 영역을 수정할 수 없고 오직 자동화만 가능 (cli 기반)
2차) 생각의 전환
- 최초 진행한 파이선 cli 코드 기반으로
OpenCode에게 flutter 앱 구현 요청
- 역시나 원하는 퀄이 나오지 않고, 진행을 할 수록 점점 이상 동작을 하기 시작
3차) 다시 생각의 전환
- 최초 진행했던 것에 대한 소스코드 및 기반 문서 전부 폐기 후 새로 시작
- 모든 기능을 한번에
OpenCode에게 요청을 해 한번에 “짠” 하고 싶었지만, 이 부분도 원할하게 되는 것 가지 않았음
- “어느정도” 의 기능을 축소하여 바이브 코딩형태로 단계별 개발을 진행해보는 방법으로 전환
4차) 최종 진행
- 단계 별로 OpenCode 에 요청 하고, 결과가 원하는 수준이 아니면 개선 요청 또는 rollback 하고 다시 요청
- 토큰을 아껴쓰기 위해 모델 변경하며 작업
- 큰 작업일 때만
sisyphus 와 oracle 을 opus 4.5 와 gpt 5.2 로 전환해서 사용
- 일반적인 작업일 때는 위 설정과 같이 gpt 5-mini 를 사용
대략적인 작업순서
- 초기 프로젝트 요청
- 카메라에서 이미지 추가 기능 구현
- cunning_document_scanner 패키지 사용. 카메라로 문서를 스캔 → 이미지 목록에 추가
- 갤러리에서 이미지 사진 선택 기능 구현
- 추가된 이미지 관리 구현
- 추가된 이미지 클릭 시 미리보기 구현
- 권한 관련 문제 해결하기 위해 gemini 를 통한 자료 조사 후 개선 요청
- 버튼 UI/UX 개선 요청
- PDF 기능 구현 (생성, 미리보기, 목록, 관리, 공유)
- 추가된 이미지에 메모하기 기능 구현 (펜, 형광펜 메모)
- 이미지 사진 여러장 선택 기능 추가 구현
- 몇 번 시도해봤지만 정확히 되지 않아 gemini 와 리서치를 통해 기존 라이브러리로 불가능한 것을 깨달음
- 해당 부분은 image_picker 후 opencv 를 통해 커스텀 구현이 필요했기 때문에 고성능 모델 활용
- 버그 개선 및 UI/UX 개선 요청
- 이미지 목록 그룹 기능 구현 요청
- 단일 이미지 관리에서 복수 이미지 관리하게 개선
- 소스코드 클린징 요청
- 전체 코드를 읽고 잘 작업해야하는 부분이 있어 고급 모델로 수행
결과물
회고
- flutter를 개발해본적이 없었기 때문에 초기에 어떻게 진행해야할지 고민이 있었음
- gemini 같은 것과 간단한 검색을 통해 플루터 껍데기 돌아가는 것부터 터득해야했음
- xcode, 인증서 관련, 실행방법 등등..
- 코드를 직접적으로 수정을 하지 않았기 때문에 글을 작성하는 지금도 flutter 나 swfit 문법은 전혀 모름
- 몇번의 실패는 있었음
- 전체 요구사항을 한번에 제공을 하면 어려움이 있음
- 기능 하나씩 작계 쪼개서 성공할때까지 작업을 하라고 하고 성공을 하면 사용성이나 진짜 내가 원하는 바와 동일하게 구현이 됐는지 확인이 필요했음
- 만약, 이때 작게 쪼개지 않고 작업을 하면 원하는 결과물이 나오지 않았을때 rollback 하는 선택지가 쉽지 않을것 같음
- Coding AI 를 활용하는 경험을 해볼 수 있었음.
- 진행 전 은 아래와 같은 단편적인 작업들을 진행해봄
- 간단한 코드 도움, 테스트 코드 작성 등을 시작으로 Coding AI 를 시작
- 내가 작성한 코드에 Review 하는 것으로 처음 Agent 를 활용해봄
- 조금 더 확장해보기 위해 Agent 를 통해 작은 기능 개발을 진행해 봄
- 가끔 답답하긴 하지만 그래도 내가 하는 업무에 도움이 되고 시간을 쭐여주는 고마운 존재가 됐음
- 새로운 걸 만들면 더 잘 할 거 같은데.. 어떻게 시작해야할지 엄두가 나지 않았을때 적절한 주제가 나타나서 시도해봄
- OpenCode 를 활용을 적극적으로 해볼 수 있었고, 어떻게 일을 시켜야할지 조금더 꺠닫는 시간이 될 수 있었음
- 해당 방법을 통해 현재 구현된 코드.. 현재 업무에 어떤식으로 적용을 하는게 좋을지 감을 조금더 잡을 수 있던것 같음
