OpenCode를 활용한 문서 스캔 앱 개발 회고

배경

• 아이 문제집 종류가 많아, 매번 외부로 갈 때 문제집을 가지고 가서 하는 것은 번거로움이 있음
• 스캔을 해서 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 패키지 사용. 카메라로 문서를 스캔 → 이미지 목록에 추가
  • 갤러리에서 이미지 사진 선택 기능 구현
    • edge_dection 패키지 사용. 갤러리에서 이미지 사진 선택 후 문서 스캔 → 이미지 목록에 추가
  • 추가된 이미지 관리 구현
  • 추가된 이미지 클릭 시 미리보기 구현
  • 권한 관련 문제 해결하기 위해 gemini 를 통한 자료 조사 후 개선 요청
• 버튼 UI/UX 개선 요청
• PDF 기능 구현 (생성, 미리보기, 목록, 관리, 공유)
• 추가된 이미지에 메모하기 기능 구현 (펜, 형광펜 메모)
• 이미지 사진 여러장 선택 기능 추가 구현
  • 몇 번 시도해봤지만 정확히 되지 않아 gemini 와 리서치를 통해 기존 라이브러리로 불가능한 것을 깨달음
  • 해당 부분은 image_picker 후 opencv 를 통해 커스텀 구현이 필요했기 때문에 고성능 모델 활용
• 버그 개선 및 UI/UX 개선 요청
• 이미지 목록 그룹 기능 구현 요청
  • 단일 이미지 관리에서 복수 이미지 관리하게 개선
• 소스코드 클린징 요청
  • 전체 코드를 읽고 잘 작업해야하는 부분이 있어 고급 모델로 수행

결과물

회고

• flutter를 개발해본적이 없었기 때문에 초기에 어떻게 진행해야할지 고민이 있었음
  • gemini 같은 것과 간단한 검색을 통해 플루터 껍데기 돌아가는 것부터 터득해야했음
  • xcode, 인증서 관련, 실행방법 등등..
• 코드를 직접적으로 수정을 하지 않았기 때문에 글을 작성하는 지금도 flutter 나 swfit 문법은 전혀 모름
• 몇번의 실패는 있었음
  • 전체 요구사항을 한번에 제공을 하면 어려움이 있음
  • 기능 하나씩 작계 쪼개서 성공할때까지 작업을 하라고 하고 성공을 하면 사용성이나 진짜 내가 원하는 바와 동일하게 구현이 됐는지 확인이 필요했음
  • 만약, 이때 작게 쪼개지 않고 작업을 하면 원하는 결과물이 나오지 않았을때 rollback 하는 선택지가 쉽지 않을것 같음
• Coding AI 를 활용하는 경험을 해볼 수 있었음.
  • 진행 전 은 아래와 같은 단편적인 작업들을 진행해봄
    • 간단한 코드 도움, 테스트 코드 작성 등을 시작으로 Coding AI 를 시작
    • 내가 작성한 코드에 Review 하는 것으로 처음 Agent 를 활용해봄
    • 조금 더 확장해보기 위해 Agent 를 통해 작은 기능 개발을 진행해 봄
  • 가끔 답답하긴 하지만 그래도 내가 하는 업무에 도움이 되고 시간을 쭐여주는 고마운 존재가 됐음
  • 새로운 걸 만들면 더 잘 할 거 같은데.. 어떻게 시작해야할지 엄두가 나지 않았을때 적절한 주제가 나타나서 시도해봄
    • OpenCode 를 활용을 적극적으로 해볼 수 있었고, 어떻게 일을 시켜야할지 조금더 꺠닫는 시간이 될 수 있었음
    • 해당 방법을 통해 현재 구현된 코드.. 현재 업무에 어떤식으로 적용을 하는게 좋을지 감을 조금더 잡을 수 있던것 같음