Development/시간순이

첫 화면 - 폴더를 받고 사진을 보여주기까지

MildChoco 2026. 6. 30. 11:21

 

지난 글에서 빈 창 하나를 띄웠습니다. 이번엔 그 빈 창에 첫 화면을 그렸습니다. 사용자가 시간순이를 켜고 가장 먼저 마주하는 화면 - 사진 폴더를 건네는 자리입니다.

폴더를 받는 두 가지 길

폴더를 받는 방법은 두 가지로 잡았습니다. 끌어다 놓기(드래그 앤 드롭)와, 버튼을 눌러 고르기. 드래그가 익숙한 사람은 탐색기에서 폴더를 그냥 끌어다 놓고, 아닌 사람은 버튼을 눌러 폴더를 고르면 됩니다. 한 화면에서 둘 다 자연스럽게 처리되도록 했습니다.

둘 다 Tauri가 표준으로 제공하는 기능이었습니다. 드래그 앤 드롭은 창에 떨어진 경로를 그대로 이벤트로 받고, 폴더 선택 창은 플러그인 하나를 붙이면 운영체제의 기본 폴더 선택 창이 뜹니다. 두 경로 모두 결국 "폴더 경로 문자열 하나"를 얻는 거라, 받은 다음의 처리는 한 군데로 모았습니다.

 

여기서 제가 한 건 "입력은 드롭과 버튼 두 가지, 받은 뒤 처리는 공통으로" 라는 흐름을 정한 것이고, 이벤트를 연결하고 플러그인을 붙이는 실제 작업은 클로드 코드가 했습니다.

 

폴더 안을 들여다보기

폴더를 받았으면 그 안에 뭐가 들었는지 보여줘야겠죠. 받은 폴더에서 사진 파일을 훑어 개수와 이름을 목록으로 띄웠습니다.

폴더 안 파일을 읽는 데도 방법이 갈렸습니다. 파일 시스템 플러그인을 쓰는 길이 있었는데, 어떤 경로까지 읽게 허용할지 권한 범위를 따로 설정해야 해서 번거로웠습니다. 대신 폴더를 읽어 이미지 확장자만 걸러 이름을 돌려주는 작은 함수를 백엔드(Rust)에 하나 두는 쪽으로 갔습니다. 하는 일이 분명하고 통제하기 쉬웠거든요.

 

이렇게 "두 가지 길 중 더 단순한 쪽 고르기"가 사실 디렉팅의 큰 부분입니다. 클로드는 양쪽 다 막힘없이 만들어주기 때문에, 어느 쪽이 이 프로젝트의 단순함에 맞는지를 제가 골라줘야 합니다.

 

폴더를 로딩한 화면

 

색을 고르다

기능이 도니까 이제 눈에 보이는 멋이 신경 쓰였습니다. 컬러 테마를 하나 정해서 앞으로 만들 화면에 일관되게 입히고 싶었어요. 후보는 여럿이었습니다 - 차분한 톤, 보라 계열, 민트, 파스텔.

그런데 색은 말로 고르면 감이 안 옵니다. 그래서 앱 안에 임시로 테마 전환 버튼을 몇 개 박아 넣고, 실제 창에서 눌러가며 비교했습니다. 버튼을 누르면 포인트 색만 바뀌는 게 아니라 배경까지 그 색조로 은은하게 물들도록 했고요. 이렇게 직접 눌러보니 결정이 빨랐습니다. 결국 라벤더로 정했습니다.

색은 한 곳에서 변수로 관리하게 해뒀습니다. 나중에 색 하나만 바꿔도 화면 전체에 반영되고, 다른 화면을 추가해도 같은 테마가 그대로 따라옵니다. 결정에 쓴 임시 버튼들은 다 걷어냈습니다.

필요한 시안을 즉석에서 만들어 비교하고, 마음에 들면 남기고 아니면 버리는 - 이 빠른 반복이 AI에 기대 만드는 작업의 재미였습니다.

 

AI 디렉팅은 어땠나

이번 작업에서 제가 한 건 결정들이었습니다. 입력을 어떻게 받을지(드롭과 버튼), 폴더 안을 어떻게 보여줄지(개수와 목록), 단순한 구현 경로는 어느 쪽인지, 무슨 색을 쓸지. 이벤트 연결, 플러그인 붙이기, 폴더를 읽는 백엔드 함수, 색을 변수로 묶는 작업은 전부 클로드 코드가 했습니다.

 

특히 테마를 고르려고 즉석에서 전환 버튼을 만들어 본 게 인상적이었습니다. "결정을 위한 일회용 도구"를 부담 없이 만들고 버릴 수 있다는 것 - 이게 직접 다 짜야 했다면 엄두를 못 냈을 일입니다.