Marklog

브라우저 새 탭을 대체하는 북마크 대시보드 확장 프로그램

소개

Marklog는 기존 브라우저 즐겨찾기의 불편함을 해소하기 위해 만들어졌습니다.

기존 문제점:

• 폴더를 클릭해야 내부 사이트가 보임
• 한눈에 모든 북마크를 확인하기 어려움

Marklog 해결책:

• 새 탭에서 모든 폴더와 사이트를 한눈에 확인
• 와이드 모니터에 최적화된 대시보드 형태
• 초성 검색으로 빠른 사이트 접근
• 키보드만으로 전체 네비게이션 가능

스크린샷

┌─────────────────────────────────────────────────────────────────┐
│                      [🔍 검색창]                     [⚙️ 설정] │
├─────────────────────────────────────────────────────────────────┤
│                        ★ 즐겨찾기 영역                          │
│     [네이버] [구글] [유튜브] [GitHub] [노션] [슬랙] [+추가]     │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐            │
│  │ 🌐 포털      │ │ 💬 소셜      │ │ 🛒 쇼핑      │ ...        │
│  │ ─────────── │ │ ─────────── │ │ ─────────── │            │
│  │ 네이버       │ │ 인스타그램   │ │ 쿠팡         │            │
│  │ 다음         │ │ 트위터       │ │ 11번가       │            │
│  │ 구글         │ │ 페이스북     │ │ [+ 추가]     │            │
│  │ [+ 추가]     │ │ [+ 추가]     │ │              │            │
│  └──────────────┘ └──────────────┘ └──────────────┘            │
└─────────────────────────────────────────────────────────────────┘
                                           [↑↓←→ 이동] [Enter 열기]

설치 방법

Chrome

1. 이 저장소를 다운로드하거나 클론
2. Chrome에서 chrome://extensions 접속
3. 우측 상단 개발자 모드 활성화
4. 압축해제된 확장 프로그램을 로드합니다 클릭
5. Marklog 폴더 선택

Edge

1. 이 저장소를 다운로드하거나 클론
2. Edge에서 edge://extensions 접속
3. 좌측 하단 개발자 모드 활성화
4. 압축 풀린 파일 로드 클릭
5. Marklog 폴더 선택

주요 기능

🔍 검색

• 사이트 이름, URL, 메모에서 통합 검색
• 초성 검색 지원: "ㄴㅇㅂ"로 "네이버" 검색 가능
• 키보드만으로 빠른 탐색 (/ → 검색 → ↑↓ → Enter)

⌨️ 키보드 네비게이션 (v1.1.0)

• 방향키로 이동: 즐겨찾기 ↔ 폴더 ↔ 사이트 간 자유로운 이동
• Enter로 열기: 선택된 항목 즉시 열기
• Esc로 취소: 네비게이션 모드 종료

📁 폴더 관리

• 폴더별 사이트 분류
• 이모지 아이콘 설정 가능
• 폴더 색상 설정 (v1.1.0): 각 폴더에 고유 색상 지정
• 드래그앤드롭 순서 변경 (v1.1.0): 폴더 헤더를 드래그하여 순서 변경

🎨 배경 커스터마이징 (v1.1.0)

• 단색 배경: 원하는 색상 선택
• 그라데이션: 5가지 프리셋 또는 직접 CSS 입력
• 이미지 배경: URL로 배경 이미지 설정
• 투명도 조절: 카드 불투명도 조절로 배경 강조

⭐ 즐겨찾기

• 자주 사용하는 사이트 빠른 접근
• 페이지당 8개, 무제한 추가 가능

🌐 다국어 지원 (v1.2.0)

• 자동 언어 감지: 브라우저 언어에 따라 자동 전환
• 지원 언어: 한국어, English
• 설정에서 수동 언어 변경 가능

⚙️ 설정

• 라이트/다크 테마
• 즐겨찾기 표시 여부
• 폴더 줄 수 (1줄/2줄)
• 폴더 스크롤 모드 (v1.2.0): 고정 높이 또는 자동 높이 선택
• 언어 설정 (v1.2.0): 자동/한국어/English
• 데이터 백업/복원

⌨️ 키보드 단축키

단축키	기능
/	검색창으로 이동
↑ ↓ ← →	항목 간 이동
Enter	선택한 사이트 열기
Esc	검색/모달/네비게이션 종료
Ctrl+클릭	새 탭에서 열기
Shift+클릭	새 창에서 열기

파일 구조

Marklog/
├── manifest.json      # 확장 프로그램 설정
├── newtab.html        # 메인 화면 구조
├── newtab.css         # 스타일 (테마 포함)
├── newtab.js          # 메인 로직
├── _locales/          # 다국어 지원 (v1.2.0)
│   ├── en/messages.json  # 영어
│   └── ko/messages.json  # 한국어
├── utils/
│   ├── storage.js     # 데이터 저장/동기화
│   ├── search.js      # 검색 기능 (초성 포함)
│   ├── dragdrop.js    # 드래그앤드롭
│   └── i18n.js        # 다국어 유틸리티 (v1.2.0)
├── icons/             # 확장 프로그램 아이콘
├── CHANGELOG.md       # 버전 히스토리
└── README.md          # 이 파일

데이터 동기화

Marklog는 chrome.storage.sync를 사용하여 데이터를 저장합니다.

• Chrome: Google 계정으로 로그인 시 자동 동기화
• Edge: Microsoft 계정으로 로그인 시 자동 동기화

기여

버그 리포트, 기능 제안, PR 모두 환영합니다.

1. Fork
2. Feature branch 생성 (git checkout -b feature/amazing-feature)
3. Commit (git commit -m 'Add amazing feature')
4. Push (git push origin feature/amazing-feature)
5. Pull Request

라이선스

MIT License - 자유롭게 사용, 수정, 배포 가능

Changelog

자세한 변경 내역은 CHANGELOG.md를 참조하세요.