안녕하세요! 오늘은 최근 Electron을 활용해 제작한 유니크한 폴더 런처, QuickFolder의 개발 과정을 공유해보려 합니다.
단순한 폴더 바로가기에서 한 걸음 더 나아가, 데스크탑 경험을 완전히 바꿔놓을 프리미엄 디자인과 기능을 담았습니다.
1. 기획 의도: "미니멀리즘과 생산성의 만남"
윈도우 환경에서 자주 쓰는 폴더들을 열기 위해 매번 탐색기를 뒤지는 과정이 번거로울 때가 많죠. Apple의 Dynamic Island에서 영감을 얻어, 화면 상단에 콤팩트하게 숨어있다가 필요할 때만 화려하게 펼쳐지는 폴더 전용 '허브'를 만들고 싶었습니다. 물론.. 가장 중요한 이유는 내가 불편해서였죠^^
2. 디자인: "Midnight Aurora" 테마
QuickFolder의 가장 큰 특징은 독창적인 'Midnight Aurora' 테마입니다.
- Deep Navy & Purple: 신비롭고 깊은 밤하늘을 닮은 배경색
- Aurora Glow: 아이콘과 테두리에 적용된 시안(Cyan) 색상의 은은한 발광 효과
- Glassmorphism: 투명도와 블러(Blur)를 활용한 입체감 있는 UI
기성 제품의 느낌을 지우고, 오직 Bear Dev만의 프리미엄 감성을 담아내기 위해 수많은 레이아웃 튜닝을 거쳤습니다.
3. 주요 기능
- 6x2 콤팩트 그리드: 한 줄에 6개씩, 한 화면에 최대 12개의 폴더를 스크롤 없이 한눈에 확인할 수 있습니다.
- 스마트 오토하이드(Auto-hide): 창의 제목 표시줄을 가리지 않도록 평소에는 15%의 투명도로 숨어있다가, 마우스를 올리면 즉시 선명해집니다.
- Draggable & Freedom: 정해진 위치뿐만 아니라 사용자가 원하는 곳 어디든 드래그해서 배치할 수 있습니다.
- 멀티 접근 제어: 단축키(
Alt+Shift+G)와 마우스 호버, 두 가지 방식 모두 지원하여 접근성을 극대화했습니다.
4. 기술 스택
- Framework: Electron (Main process & Renderer process 구조)
- Styling: Vanilla CSS (Custom Variables, Flexbox, CSS Grid)
- Packaging: Electron-builder (Portable EXE)
긴 폴더 이름을 자동으로 두 줄로 배치하고, 스크롤바 없는 완벽한 한 화면을 만들기 위해 1px 단위로 조정한 보람이 있네요.
어쨌든 조금 더 수정하여 공유하도록 하겠습니다. 일단 오늘은 여기까지~~~~~ 좋은 밤 되세요^^
댓글