1. 기획 동기
상반기 입사 지원을 하면서 자주 사용하는 파일이나 사진을 크롬 브라우저에서 업로드할 때마다 불편함을 느꼈다. 파일을 찾아가는 과정이 생각보다 귀찮고 번거로웠기 때문이다.
위 화면은 내 노트북에서 파일 업로드 버튼을 클릭했을 때 나오는 파일 탐색기다. 여기서 원하는 파일을 찾아가는 시간을 줄일 수 있지 않을까? 이런 생각에서 '파일 경로 북마크' 프로젝트가 시작되었다.
크롬 우측 상단의 북마크 탭처럼, 내 노트북의 파일 경로를 북마크로 저장하면 파일 업로드 시 찾아가는 시간을 획기적으로 줄일 수 있을 것 같았다.
2. 요구사항 정리
애플리케이션 개발에 앞서 가장 고민했던 지점은 "북마크를 정말 필요한 순간에 바로 사용할 수 있어야 한다"는 것이었다. 이상적인 시나리오를 그려보니, 크롬에서 파일 업로드 버튼을 클릭하는 순간 내가 만든 북마크 서비스가 자연스럽게 나타나면 좋겠다는 생각이 들었다. 이를 구현하려면 크롬 확장 프로그램을 활용하는 것이 가장 효과적일 것 같았다.
`파일 업로드 프로세스 분석`
먼저 파일 업로드 프로세스를 분석했다. 대부분의 웹사이트에서 파일 업로드 버튼을 클릭하면 <input type="file"> 태그가 동작한다는 것을 확인할 수 있었고 이를 바탕으로 크롬 확장 프로그램으로 사용자의 파일 업로드 클릭을 감지하고, 이를 트리거로 내 애플리케이션에 메시지를 전달하는 방식으로 구현 방향을 잡았다.
`기술 스택 선택`
사용할 언어와 라이브러리는 고민 없이 결정했다. Java로 프로젝트를 만들고 싶었고, Java에서 UI를 구현하는 대표적인 라이브러리인 Swing UI를 선택했다. 따라서 메인 기술 스택은 Java + Swing UI로 확정되었다.
`핵심 요구사항`
대략적인 방향성과 사용할 도구를 정한 후, 고객의 요구사항을 뽑아보았다. (물론 여기서 고객은 나 자신이었다. ㅋㅋ)
1. 사용자는 파일, 폴더의 경로를 북마크에 저장한다.
a. 북마크를 저장할 때 이름을 설정할 수 있다.
b. 북마크는 사용용도에 따라 그룹으로 분류할 수 있다.
c. 그룹 내에 경로들은 카테고리로 분류할 수 있다.
2. 사용자는 저장한 북마크들을 볼 수 있으며 잘못 저장한 북마크는 수정하거나 삭제할 수 있다.
a. 그룹과 그룹 사이에 북마크를 옮길 수 있다.
3. 사용자는 저장한 북마크에 대한 파일경로를 복사해갈 수 있다.
4. 사용자는 북마크 리스트에 보여지는 그룹, 카테고리, 북마크 순서를 원하는 순서로 조정할 수 있다.
5. 그룹과 관련해서 CRUD를 진행할 수 있다.
6. 카테고리와 관련해서 CRUD를 진행할 수 있다.
애플리케이션에 필요한 기능을 정리한 결과, 6가지 핵심 요구사항을 도출했다. 이를 바탕으로 프로젝트의 방향성을 다음과 같이 설정했다.
- 크롬 확장 프로그램을 만들어 애플리케이션과 연결한다
- Java와 Swing UI 라이브러리를 이용해 데스크톱 애플리케이션을 만든다
- 애플리케이션은 정의한 요구사항을 만족하도록 구현한다
3. 구현
`POC 검증 : 크롬 확장 프로그램과 애플리케이션 연동 가능성`
가장 먼저 검증한 것은 "크롬 확장 프로그램과 내 애플리케이션을 연결할 수 있는가?"였다. 한 가지 문제가 있었다면, 크롬 확장 프로그램을 한 번도 만들어본 적이 없다는 점이었다.
하지만 우리에게는 생성형 AI라는 든든한 도구가 있었기에 주저하지 않고 개발에 들어갔다. AI로부터 크롬 확장 프로그램 코드를 받아 구현하되, manifest.json의 각 키 값은 Chrome 공식 문서를 참고하며 필요한 기능만 빠르게 학습했다.
Chrome 확장 프로그램 | Chrome Extensions | Chrome for Developers
Chrome 확장 프로그램 개발 방법을 알아보세요.
developer.chrome.com
이 과정에서 크롬 확장 프로그램은 JavaScript에 익숙하다면 생각보다 어렵지 않게 구현할 수 있다는 것을 알게 되었다. 학습 후 GPT가 생성한 간단한 Swing UI 프로그램과 확장 프로그램의 연동을 테스트한 결과, 파일 업로드 버튼 클릭 동작이 실제로 내 애플리케이션까지 전달되는 것을 확인했다.
이 과정에서 핵심은 Native Messaging Host 등록이었다. 내가 만든 애플리케이션을 크롬 브라우저와 통신할 수 있는 메시지 호스트로 등록하면, 크롬 확장 프로그램에서 발생한 이벤트(파일 업로드 버튼 클릭)를 감지하고 네이티브 애플리케이션으로 메시지를 전달할 수 있다.
`Java 객체지향 프로그래밍과 디자인 패턴`
연결이 가능하다는 것을 확인한 후에는 정리한 요구사항을 토대로 코드를 구현했다. 아래 다이어그램은 최종 결과물의 도메인 모델이다.
코드를 작성할 때 2가지를 중점적으로 고려했다.
1. 도메인 모델 단순화 및 설계 개선
초기 기획에는 그룹, 북마크, 카테고리 세 가지 객체가 필요하다고 생각했다. 하지만 카테고리까지 도입하면 사용자 입장에서 "카테고리와 그룹의 차이가 뭐지?"라는 혼란을 야기할 수 있다는 생각이 들었다.
단순한 애플리케이션일수록 명확한 구조가 중요하다는 판단하에, 최종적으로 그룹과 북마크 두 가지 핵심 객체만으로 도메인 모델을 구성했다.
객체 간 협력 구조를 분석하던 중, "그룹 생성" 기능에서 "그룹 객체 생성"과 "생성된 그룹을 파일에 저장"이라는 두 가지 책임을 발견했다. 이 두 책임을 그룹 객체 하나가 담당하는 구조는 단일 책임 원칙에 위배된다고 판단했고, 서비스 계층을 도입하여 도메인 로직과 저장 로직을 조율하는 역할을 분리했다.
2. 어댑터 패턴을 통한 유연한 저장소 설계
그룹 저장소 구현에는 MicroStream이라는 라이브러리를 처음 도입했다. 새로운 라이브러리를 사용하는 만큼 예상치 못한 이슈가 발생할 가능성을 고려했고, 이러한 리스크에 대비하기 위해 어댑터 패턴을 적용했다.
저장소 인터페이스를 추상화하고 MicroStream을 어댑터로 감싸는 구조로 설계함으로써, 향후 다른 저장소 라이브러리로 교체가 필요한 상황에서도 기존 코드의 수정 없이 어댑터만 교체하면 되도록 유연성을 확보했다.
이 과정을 통해 8월부터 9월까지 학습했던 객체지향과 디자인 패턴을 직접 적용해볼 수 있었다. 앞으로 코드를 작성하고 설계할 때 이런 지식을 활용하면 보다 확장 가능한 개발을 진행할 수 있겠다는 확신이 들었다.
`파일 입출력과 MicroStream 라이브러리`
1. 데이터 영속화 전략: 데이터베이스 vs 파일 시스템
대부분의 프로그램은 데이터를 영속화해야 프로세스를 종료하고 다시 실행해도 저장한 데이터를 불러와 서비스를 제공할 수 있다.
기존 웹 서비스를 개발할 때는 데이터베이스를 활용했지만, 이 애플리케이션에도 데이터베이스가 필요한가? 고민한 결과 대답은 No였다. 그 이유는 다음과 같다. 가벼운 소프트웨어를 만드는 것이 목적인데, 데이터베이스를 포함하는 것 자체가 무거워진다는 생각이 들었다.또, 데이터베이스를 이용한다고 쳤을 때, 로컬 DB를 사용한다는 것은 나중에 배포를 생각해보면 있을 수 없는 일이었다.
따라서 간단하게 파일 입출력을 이용해 데이터를 영속화하는 것으로 결정했다.
처음에는 Java에서 제공하는 기본 파일 입출력 기능을 사용하려고 했다. 하지만 파일 저장 및 조회 시 필요한 직렬화/역직렬화 코드, 데이터 저장 및 수정 시 필요한 영속성 관리 코드를 작성하는 데 드는 비용이 4일 안에 해결하기 어렵다고 판단했다. MVP를 빠르게 완성하기 위해 기존 라이브러리를 활용하기로 결정하고 파일 입출력 라이브러리를 찾아보았다.
2. MicroStream 선택 이유
그 과정에서 MicroStream을 선택하게 되었다.
MicroStream은 JVM 메모리상에 존재하는 객체들의 참조 구조를 그대로 파일 시스템에 영속화하는 라이브러리다. 예를 들어, Group 객체가 Bookmark 리스트를 관리하는 경우, Group은 각 Bookmark에 대한 참조를 보유한다. MicroStream은 이러한 객체 그래프 구조를 있는 그대로 저장하고 복원할 수 있다.
이러한 MicroStream을 선택한 이유는 크게 2가지다.
1) 단순한 도메인 모델과의 최적 호환성
이번 프로젝트의 데이터 구조는 그룹과 북마크, 두 가지 엔티티만 존재하는 매우 단순한 형태다. 그룹 리스트를 루트(Root) 노드로 설정하면, 그룹과 북마크 간의 관계를 객체 그래프로 자연스럽게 표현할 수 있다. 별도의 매핑 작업 없이 도메인 모델을 그대로 영속화할 수 있다는 점에서 MicroStream과 궁합이 완벽했다.
2) 단일 언어로 통합된 데이터 처리
Java Stream API만으로 정렬, 필터링, 조회 등 모든 데이터 처리 로직을 구현할 수 있다는 점이 큰 장점이었다. SQL 기반 파일 저장 방식을 사용했다면 Java 코드 외에 SQL 쿼리까지 관리해야 하는 복잡도가 추가된다. 만약 MicroStream을 활용한다면? 데이터 저장부터 조회까지 순수 Java 코드만으로 일관되게 처리할 수 있다.
물론 처음 사용하는 라이브러리인 만큼 동시성 문제나 메모리 관리 이슈가 발생할 가능성도 생각했다. 하지만 앞서 적용한 어댑터 패턴 덕분에 실제 사용 중 문제가 발견되더라도 저장소 구현체만 교체하면 되는 구조이기 때문에, 리스크를 충분히 관리 가능한 수준으로 판단했다.
`Swing UI를 영리하게 작성하기 (With AI Agent)`
처음에는 GPT를 이용해 단순하게 내가 작성한 서비스 로직과 연결하는 방식으로 UI를 구현했다.
아래와 같은 프롬프트를 활용해 Swing 프로그램 코드 작성을 요청했는데, 이 과정에서 메서드뿐만 아니라 해당 메서드 내부의 구현을 어떻게 진행했는지도 간단하게 전달해야 2~3번 반복 요청하지 않을 수 있다는 사실을 배웠다.
- 다음 내부 기능들을 구현했는데 Swing UI 연결을 부탁할게. MainFrame 코드는 전달해 줄게.
- 북마크 리스트를 보여줄 때 BookmarkType을 보고 파일 아이콘, 폴더 아이콘 붙여서 보여주기 bookmark.getType()으로 타입 확인 가능
- 북마크 그룹 삭제 연결 → 이 메서드 활용: bookmarkGroupService.deleteBookmarkGroup(long id);
- 북마크 그룹 이름 변경 연결 → 이 메서드 활용: bookmarkGroupService.renameBookmarkGroup(long id, String name);
- 북마크 순서 변경 연결(북마크 그룹과 동일하게 드래그 앤 드롭 방식) → 이 메서드 활용: reorderBookmark(long groupId, long prevId, int toIndex)
- 북마크 정보 수정 연결 → 이 메서드 활용: updateBookmark(long bookmarkId, String displayName, String path)
그 결과, 위 사진의 UI가 탄생했다. (아직 좀 볼품없습니다~)
1. AI Agent로 UI 개선 자동화 시도
이후 UI 개선 작업을 진행하면서 GPT에게 "분석 요청 → 수정 요청"을 반복적으로 진행했다. 이 과정에서 "내가 매번 이 루틴을 조율해야 할 필요가 있을까?"라는 의문이 들었고, 이를 AI로 자동화할 수 있지 않을까 하는 아이디어가 떠올랐다.
그래서 이번 기회에 AI Agent를 실제로 구현해보기로 결심하고 바로 Claude Code 구독을 결제했다. 반복적인 UI 개선 프로세스를 자동으로 수행할 수 있는 Agent를 쉘 스크립트로 구현하는 것을 목표로 삼았다.
위와 같은 구조로 동작하는 Agent를 만들었지만, 아쉽게도 직접 사용해볼 수는 없었다. 내가 만든 Agent는 Claude Code가 아니라 Claude API를 사용할 때만 작동했고, API 비용 문제로 Claude Code를 구독한 상황이었기 때문에 다른 방법을 찾아야 했다.
2. 반자동화 워크플로우 구축
완전한 자동화는 아니지만, 대안으로 장기 작업용 프롬프트를 설계하는 방식을 선택했다. Agent에서 설계했던 작업 순서를 프롬프트로 그대로 옮기고, 마지막에 "이 과정을 N번 반복해줘"라는 지시를 추가했다.
이를 통해 완전 자동화는 아니지만, 한 번의 프롬프트 입력으로 여러 차례의 개선 사이클을 연속적으로 수행하는 반자동화 워크플로우를 구축할 수 있었다.
물론 이 반자동화 방식도 완벽하지는 않았다. 프롬프트에 세세한 디자인 지침까지 모두 담지 못했기 때문에, 처음부터 만족하는 수준의 UI가 완성되지는 않았다.
하지만 UI의 핵심 구조와 뼈대는 효과적으로 구축할 수 있었고, 세부적인 스타일링과 레이아웃 조정은 추가 프롬프팅을 통해 점진적으로 개선해 나갔다. 이러한 반복 과정을 거쳐 최종적으로 아래와 같은 UI를 완성했다
이 과정에서 앞으로 Swing UI를 이용하여 애플리케이션을 만들 일이 생긴다면 내가 직접 Swing 을 자세하게 공부하고 코드를 짜기보다 Swing UI로 만들 수 있는 UI 명칭을 공부하고 AI에게 명칭을 통해 내가 원하는 구조를 명확하게 표현하는게 더 좋은 UI를 탄생시킬 수 있을 것 같다는 생각이 들었다.
4. 시연 영상
UI 단은 정말 걱정을 많이했는데 이번 기회에 생성형 AI의 위대함을 한번 더 경험해볼 수 있었던 것 같다. 아래 영상은 20초 정도 되는 영상인데 앞으로 내가 파일 관리나 URL 관리를 할 때 애용할 것 같다.
시나리오는 다음과 같다.
- 이 글의 동영상을 업로드할 때 동영상 업로드 버튼을 클릭하는 시점에 내가 만든 파일 경로 북마크가 뜬다.
- 원하는 북마크를 클릭하면 파일 경로를 복사할 수 있다.
- 파일 탐색기에 해당 경로를 붙여넣기 후 확인을 누른다.
영상에서는 너무 빠르게 지나가 뭔 차이지 싶을 수도 있는데 파일 탐색기가 켜지면서 내 애플리케이션 우상단에 같이 올라오는 것이 차이점이다. 해당 북마크를 통해 자주 쓰거나 원하는 파일을 바로 찾아 업로드 할 수 있는 것이 가장 큰 장점이다.
5. 개선해야 될 점들..
위 과정을 거쳐 최종적으로 동작하는 소프트웨어를 완성했다. 하지만 4일이라는 시간 안에 구현했기 때문에 부족한 부분도 있고 추가하지 못한 기능도 생겼다.
그 내용을 정리해본 결과 크게 3가지 범주로 분류할 수 있었다. 직접 사용해보며 겪은 경험을 바탕으로 뽑아낸 것이라 이것 외에도 더 존재한다고 생각한다. 따라서 이후에는 아래 작업을 진행하며 애플리케이션 고도화를 진행할 예정이다.
개선작업
- Swing UI 코드 분리 및 각 컴포넌트의 이름 정리하기 (ex. 트레이, 팝업 메뉴, 툴바 등)
- 애플리케이션 z-index 수정하기 → 현재는 가장 앞에만 표시됨
- Swing UI에서 보여주는 메시지가 애플리케이션 하단에 표시되는데 가독성이 떨어짐
- Main 코드 수정 및 설정 관련 코드 분리하기
- 북마크 ↔ 크롬 확장 프로그램 통신 설계하기- 검색 기능
- lnk로 바로가기 만들어 유저가 파일/폴더 위치를 이동시켜도 문제없이 동작하도록 구현 (JNA)
- 그룹, 북마크 순서 변경 UI 추가하기
추가 인프라 작업
웹 스토어 개발자 등록 후 크롬 확장 프로그램 등록하기
6. 최종 목표
완성된 파일 경로 북마크 v1은 지금 실제로 사용하고 있다. 사용해보니 크롬에서 자주 사용하는 파일을 업로드하는 과정이 정말 빨라진 것을 체감할 수 있었다.
아직 내가 만든 소프트웨어를 직접 사용해본 경험이 많지 않아 어색하긴 하지만, 계속 불편한 점을 다듬어 최종적으로는 소프트웨어를 다운로드받을 수 있는 사이트에 업로드하는 것이 목표다. 그렇게 하려면 크롬 확장 프로그램까지 등록해야 하기 때문에 그 과정이 매우 험난할 수 있다고 생각되지만, 그만큼 도전적이기 때문에 더 재미있을 것 같다.
내가 불편했던 것을 해결하려고 만든 소프트웨어는 처음인데, 이 소프트웨어를 사용감 좋게 개선해 최종적으로 다른 사람들도 사용하기 좋은 소프트웨어로 만드는 것이 최종 목표다.