FLICK 시작하기

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

지원되는 게시글 페이지에 들어가면 화면 왼쪽 위에 작은 FLICK beta 배지가 나타납니다. 배지를 클릭하거나 F4를 누르면 게시글의 제목, 이미지, 영상, 본문이 세로 쇼츠 패널로 재구성됩니다.

현재 프로젝트 기준

이 문서는 실제 확장 프로젝트인 C:\Users\Administrator\Desktop\repo\flick 기준으로 작성되어 있습니다.

위치	역할
src/entry.ts	content script 진입점, 배지 삽입, 단축키, 라우트 감시
src/ui.ts	쇼츠 패널, 편집, 폰트, 배경, 가이드라인, 저장 로직
src/rules/*.ts	사이트별 게시글 추출 규칙
content/manifest.json	Chrome MV3 매니페스트와 로드 대상 도메인
scripts/	버전 동기화와 확장 산출물 검증

문서 소스는 C:\Users\Administrator\Desktop\repo\docs\side-project\flick에서 관리됩니다.

지원 사이트

현재 기본 지원 사이트는 아래 네 곳입니다.

사이트	대상
에펨코리아	fmkorea.com 게시글, 베스트 글, document_srl 글
디시인사이드	gall.dcinside.com 게시글
네이버 카페	cafe.naver.com/cafes/{id}/articles/... 글
개드립	dogdrip.net의 숫자 기반 게시글

사이트 판별 방식

src/rules/index.ts가 현재 URL에 맞는 규칙을 찾고, 각 규칙의 match와 articleMatch로 실제 게시글인지 한 번 더 확인합니다. 미지원 페이지에서는 배지가 비활성 상태로 표시되거나 조용히 닫힙니다.

기본 사용법

1. 지원 사이트의 게시글 페이지를 엽니다.
2. 화면 왼쪽 위의 FLICK beta 배지를 클릭하거나 F4를 누릅니다.
3. 쇼츠 패널에서 제목, 본문, 이미지, 영상을 확인합니다.
4. 필요한 경우 제목과 본문 텍스트를 직접 수정합니다.
5. 우측 또는 하단 컨트롤 패널에서 폰트, 크기, 색상, 배경, 가이드라인을 조절합니다.
6. Esc를 누르거나 컨트롤 패널의 닫기 버튼을 눌러 종료합니다.

주요 기능

기능	설명
쇼츠 패널	게시글을 9:16 비율의 세로 뷰어로 재구성합니다
제목/본문 편집	제목과 텍스트 블록을 패널 안에서 바로 수정할 수 있습니다
제목 강조	제목 텍스트를 드래그하면 선택한 강조색이 적용됩니다
폰트 조절	제목/본문 크기와 폰트를 따로 조절합니다
영역 색상	위쪽/아래쪽 영역 색상을 따로 지정합니다
전체 배경	이미지 배경을 업로드하고 선명도를 조절합니다
9:16 가이드라인	안전 영역을 표시하고 본문을 가이드라인 안쪽으로 맞춥니다
상태 표시	준비, 열림, 불러오는 중, 본문 없음, 실패, 게시글 아님 상태를 배지에 표시합니다

자세한 컨트롤 설명은 쇼츠 패널 설정을 참고해 주세요.

추출 블록 구조

FLICK은 게시글 내용을 표준 블록으로 바꾼 뒤 UI에 렌더링합니다.

type Block =
  | { type: "image"; src: string; alt?: string; gapAfter?: boolean }
  | { type: "video"; src: string; poster?: string; gapAfter?: boolean }
  | { type: "text"; text: string; gapAfter?: boolean }
  | { type: "trusted-html"; html: string; gapAfter?: boolean }
  | { type: "html"; html: string; gapAfter?: boolean };

interface ExtractResult {
  title: string;
  blocks: Block[];
  sourceUrl?: string;
  siteId?: string;
  status?: "ok" | "empty" | "error" | "unsupported";
  message?: string;
}

일반 본문은 text 블록으로 렌더링되어 편집 가능합니다. 네이버 카페 OG 링크 카드나 빈 상태 안내처럼 구조화된 UI가 필요한 경우에는 trusted-html을 사용합니다. html은 기존 규칙 호환을 위한 레거시 타입입니다.

단축키와 콘솔 API

입력	동작
F4	쇼츠 패널 열기/닫기
Esc	열려 있는 쇼츠 패널 닫기

지원 페이지의 DevTools 콘솔에서는 아래 API를 사용할 수 있습니다.

FLICK.isSupportedArticle();
FLICK.getActiveSiteConfig();
FLICK.extractPost();
FLICK.buildUI(FLICK.extractPost());
FLICK.closeShorts();

문제가 생겼을 때

증상	확인할 것
배지가 보이지 않음	지원 도메인인지, 게시글 URL 패턴인지 확인합니다
게시글 아님 상태	사이트는 지원하지만 현재 URL이 글 페이지가 아닐 수 있습니다
본문 없음 상태	원본 페이지 구조가 바뀌었거나 지연 로딩이 끝나기 전일 수 있습니다
영상이 재생되지 않음	브라우저 자동재생 정책이나 탭 포커스 상태를 확인합니다
스타일이 이상함	사용자 스타일 확장, 사이트 CSS 충돌, 배경/가이드라인 설정을 확인합니다

사이트별 추출 방식은 에펨코리아, 디시인사이드, 네이버 카페, 개드립 문서에서 확인할 수 있습니다.