🔖 Collectly

링크와 메모를 함께 모아두는 로컬 데스크탑 앱. 서버나 계정 없이 오프라인으로 동작하며, 폴더/섹션 분류, 드래그 정렬, 28종 테마를 지원합니다.

화면 미리 보기

🔖 세부 화면 더보기

✨ 기능

• 폴더 & 섹션: 링크를 폴더로 묶고, 폴더 안에서 다시 섹션으로 세분화
• 드래그 정렬: 폴더, 섹션, 카드 모두 마우스로 순서 변경 가능
• 자동 메타데이터: URL만 붙여넣으면 제목·썸네일 자동 수집(og:title, og:image)
• 링크 없는 메모: 제목+텍스트+사진만으로 구성된 메모 카드도 추가 가능
• 이미지 크롭: 드래그로 위치 조정, 슬라이더로 확대해서 원하는 부분만 자르기
• 핀 & 즐겨찾기: 중요한 링크는 폴더 상단에 고정, 자주 쓰는 건 별표
• 보기 모드 3단계: 링크만 보기 / 메모 중심 보기 / 전체 보기
• 테마 28종: 색상뿐 아니라 배경 움직임, 카드 모양, 사이드바 스킨까지 변경
• 글꼴 8종: 테마와 별개로 독립 선택 가능
• 격자 / 컴팩트 / 목록 레이아웃, 실시간 검색 지원
• 아이콘 커스텀: 폴더별로 이모지 200종 또는 직접 업로드한 이미지 사용

🧰 요구 사항

• Node.js 18 이상
• Windows(테스트 완료), macOS/Linux는 미확인

🚀 실행 방법

npm install
npm run dev

데이터는 로컬 JSON으로 저장되며 서버나 계정이 필요 없습니다.

• Windows: %APPDATA%\collectly\data.json
• 업로드한 이미지: %APPDATA%\collectly\images\

📦 설치 프로그램(exe) 만들기

npm run dist

release/ 폴더에 Windows 설치 파일이 생성됩니다.

🎨 테마 & 폰트

폰트: 기본, SUITE, 주아체, 푸어스토리, 감자꽃체, 도트체(Galmuri11), 둥근모 도트체(네오둥근모), 고운바탕

테마(28종): 그래프 노트, 코르크보드, 벚꽃놀이, PC통신 레트로, 가을 낙엽, 구름 산책, 비 오는 날, 소다 버블, 캠프파이어, 매트릭스 코드, 젠가든, 빈티지 신문, 오래된 책, 하늘분홍 그라데이션, 수족관, 온실 식물원, 빈티지 필름, 휴대폰, 우주정거장 콘솔, 분식집 포장마차, 우표수집, 실험실 노트, 그래피티 스트릿, 보물지도, 다도 찻집, 아케이드 캐비닛, 겨울 눈꽃 마을, 은하수 관측소

🗂️ 폴더 구조

collectly/
  electron/
    main.js                 # 창 생성 및 IPC 핸들러
    preload.js              # 렌더러에 안전하게 API 노출
    store.js                # 로컬 JSON 저장/CRUD 로직
    defaultThemes.js        # 기본 제공 테마 28종
  src/
    App.jsx                 # 최상위 상태관리, 활성 테마 적용
    components/
      Sidebar.jsx           # 폴더 목록, 테마별 스킨, 드래그 정렬
      TopBar.jsx            # 검색, 뷰 토글, 추가 메뉴
      ViewToolbar.jsx       # 격자/컴팩트/목록 전환
      LinkCard.jsx          # 카드 레이아웃: card / polaroid / inventory-slot / sticky-note
      FolderModal.jsx       # 폴더 추가/수정/삭제
      LinkModal.jsx         # 링크/메모 추가·수정, 메타데이터 크롤링, 사진 첨부
      SectionModal.jsx      # 섹션 추가/수정/삭제
      ThemeModal.jsx        # 테마 갤러리
      CropModal.jsx         # 드래그+확대 이미지 크롭 도구
      DecorLayer.jsx        # 배경 장식 애니메이션(비, 구름, 반딧불 등)
      NoteDetailModal.jsx   # 메모/링크 상세보기 팝업