FLICK 시작하기

커뮤니티에서 재미있는 글을 발견했을 때, 유튜브 쇼츠처럼 세로로 쭉 넘기면서 볼 수 있다면 어떨까요?

FLICK은 커뮤니티 게시글을 YouTube Shorts 스타일 세로 뷰어로 바꿔주는 Chrome 확장입니다.

지원되는 사이트에서 글을 열면 화면 한쪽에 작은 FLICK 배지가 나타나고, 클릭 한 번(또는 F4 키)으로 쇼츠 패널을 열고 닫을 수 있습니다.

이 가이드에서는 설치부터 기본 사용법, 나만의 커스터마이징, 그리고 새 사이트 규칙을 추가하는 방법까지 차근차근 안내해 드리겠습니다.

이 문서의 범위

이 문서는 flick/packages 소스 코드를 기준으로 작성되어 있습니다.

• 확장 소스: flick/packages — 실제 확장 프로그램 코드가 여기에 있습니다
• 문서 소스: flick/docs — 지금 읽고 계신 문서들입니다
• 구조 요약: 패키지 구성 페이지에서 전체 폴더 구조를 확인할 수 있습니다

지원 사이트

현재 FLICK이 기본으로 지원하는 커뮤니티 사이트들입니다.

이 사이트들의 게시글 페이지에 들어가면 FLICK 배지가 자동으로 나타납니다:

• 에펨코리아 (fmkorea)
• 디시인사이드 (dcinside)
• 네이버 카페 (Naver Cafe)
• 개드립 (DogDrip)

어떻게 사이트를 판별하나요?

내부적으로 packages/src/rules/*.ts 파일들에 각 사이트별 규칙이 정의되어 있습니다. match(도메인 범위)와 articleMatch(게시글 URL 패턴), 이 두 가지 정규식 조합으로 "지금 이 페이지에서 FLICK을 활성화할지" 판단합니다.

기본 사용법

FLICK은 정말 간단하게 사용할 수 있습니다.

1. 게시글 페이지에 접속하세요 — 지원되는 사이트의 글 페이지를 열면 화면 오른쪽에 FLICK 배지가 자동으로 나타납니다
2. 배지를 클릭하거나 F4를 누르세요 — 쇼츠 패널이 열리면서 게시글의 이미지, 비디오, 텍스트가 보기 좋게 재구성됩니다
3. 제목을 자유롭게 편집하세요 — 제목 영역을 클릭하면 바로 수정할 수 있습니다
4. 텍스트를 드래그해서 강조하세요 — 원하는 부분을 드래그하면 자동으로 색상이 입혀지고, 색상이나 초기화도 패널에서 조절할 수 있습니다
5. 헤더/푸터 높이를 조절하세요 — 경계선을 드래그하면 패딩 높이를 바꿀 수 있고, 설정은 자동 저장됩니다
6. 닫을 때는 Esc 또는 배지 클릭 — 원래 페이지의 스크롤 위치까지 깔끔하게 복원됩니다

UI 구성 요소

FLICK 패널이 어떤 요소들로 이루어져 있는지 궁금하신 분들을 위해 정리했습니다.

스타일을 커스터마이징하거나 디버깅할 때 참고하세요.

요소	클래스 / 키	하는 일
토글 배지	.flick-logo-badge	FLICK 열기/닫기 버튼입니다 (data-open 속성으로 상태 관리)
루트 래퍼	.flick-wrap-injected	패널 전체를 감싸는 컨테이너입니다 (중복 삽입을 방지해 줍니다)
제목	.flick-title	클릭해서 바로 편집할 수 있고, 글자 크기가 자동 저장됩니다
본문 미디어	.flick-img, .flick-video	이미지와 비디오를 표시하는 요소입니다
리사이즈 핸들	.flick-resize-handle	드래그해서 헤더/푸터 높이를 조절할 수 있습니다
폰트/강조 패널	.flick-fontsize-panel	제목 크기 슬라이더와 강조색을 선택하는 패널입니다

사용자 설정 저장

FLICK은 여러분이 조절한 설정값을 브라우저의 LocalStorage에 자동으로 저장합니다.

다음에 다시 열 때도 마지막으로 설정한 상태가 유지되니 편리합니다.

Key	어떤 설정인가요?
flick:titleFontSize	제목의 폰트 크기(px 단위)를 기억합니다
flick:headerHeight, flick:footerHeight	헤더와 푸터 영역의 높이를 기억합니다
flick:highlightColor	텍스트 강조에 사용 중인 색상을 기억합니다

설정 초기화하고 싶다면?

브라우저 개발자 도구(F12)에서 Application → Local Storage를 열어 flick: 으로 시작하는 항목들을 삭제하면 모든 설정이 기본값으로 돌아갑니다.

추출 블록 구조

새 사이트 규칙을 만들거나 내부 동작을 이해하고 싶다면, 이 부분이 핵심입니다.

FLICK은 게시글에서 콘텐츠를 추출할 때 아래와 같은 블록 단위로 데이터를 구성합니다.

type FlickBlock =
	| { type: 'image'; src: string; alt: string }
	| { type: 'video'; src: string; poster?: string }
	| { type: 'html'; html: string };

interface ExtractResult {
	title: string;
	blocks: FlickBlock[];
}

각 블록은 이미지, 비디오, HTML 텍스트 중 하나의 타입을 가지고 있고, ui.ts의 buildUI() 함수가 이 블록들을 순서대로 화면에 렌더링합니다.

댓글이나 광고 같은 불필요한 요소는 각 사이트 규칙 내부에서 미리 걸러내기 때문에 깔끔한 결과만 남습니다.

새 사이트 규칙 추가하기

FLICK이 아직 지원하지 않는 커뮤니티나 블로그가 있다면 직접 규칙을 만들어 볼 수 있습니다!

과정은 크게 어렵지 않습니다.

1. 새 파일 만들기 — packages/src/rules/<사이트이름>.ts 파일을 생성하세요
2. URL 패턴 정의하기 — match(도메인 범위)와 articleMatch(게시글 URL 패턴) 정규식을 정의해 주세요
3. 추출 함수 구현하기 — extract(ruleCfg) 함수에서 제목과 블록을 수집합니다. 예외 처리(try/catch)도 잊지 마세요
4. 필요한 훅 추가하기 — 원본 페이지의 비디오를 일시정지하는 prePrepare()나, 쇼츠 패널 안에서 자동재생하는 postShortsMounted() 같은 훅을 필요에 따라 추가할 수 있습니다
5. 규칙 등록하기 — rules/index.ts의 배열에 새 규칙을 import하고 추가해 주세요
6. 테스트하기 — npm run build 후 대상 페이지의 브라우저 콘솔에서 FLICK.extractPost()를 실행해 결과를 확인해 보세요

이미 구현된 사이트 규칙을 참고하면 훨씬 수월합니다.

• 에펨코리아 규칙
• 디시인사이드 규칙
• 개드립 규칙
• 네이버 카페 규칙

단축키

FLICK은 두 가지 단축키를 지원합니다.

키	동작
F4	쇼츠 패널을 열거나 닫습니다 (지원 페이지에서만 동작합니다)
Esc	패널이 열려 있을 때 닫습니다

TIP

사용자 정의 단축키 기능은 앞으로 추가될 예정입니다. 기대해 주세요!

문제가 생겼을 때

사용하다가 문제가 생겼다면 아래 표를 참고해 보세요.

이런 증상이 나타나면	원인일 수 있는 것	이렇게 해결해 보세요
배지가 안 보입니다	URL 패턴이 맞지 않거나, SPA 전환 직후일 수 있습니다	페이지를 새로고침하거나 잠시 기다려 주세요. 콘솔에서 location.href와 규칙 정규식을 비교해 볼 수도 있습니다
비디오가 자동재생되지 않습니다	브라우저의 자동재생 정책이거나 탭이 비활성 상태일 수 있습니다	탭을 포커스한 뒤 패널을 다시 열어 보세요. 사운드가 mute 상태인지도 확인해 보세요
레이아웃이 깨집니다	사이트 CSS와 충돌이 생겼을 수 있습니다	이슈를 등록해 주세요 (URL + 스크린샷 첨부). 다른 사용자 스타일 확장을 임시로 끄는 것도 도움이 됩니다
텍스트 강조가 안 됩니다	드래그 범위가 제목 편집 영역 밖일 수 있습니다	제목 영역 안에서 드래그해야 강조가 적용됩니다

보안과 프라이버시

FLICK은 여러분의 데이터를 소중히 생각합니다.

• 외부 전송 없음 — 어떤 서버로도 데이터를 보내지 않습니다. 애널리틱스도 없습니다. 모든 파싱은 브라우저 안에서만 실행됩니다
• 개인정보 수집 없음 — 그 어떠한 개인정보도 수집하지 않습니다

앞으로의 계획

FLICK은 계속 발전하고 있습니다! 앞으로 이런 기능들이 추가될 예정입니다.

• 사용자 설정 패널 (폰트, 테마, 단축키를 한 곳에서 관리)
• 더 많은 커뮤니티/블로그 사이트 지원
• E2E 회귀 테스트 (Puppeteer)
• 다국어 문서 (영문)