Flicka — Chrome 확장 프로그램으로 바로 만드는 제품 데모

AI 요약

Flicka는 제품 출시용 화면 데모를 빠르게 만드는 Chrome 확장 프로그램입니다. 탭, 전체 화면, 창, 지정 영역, 카메라를 녹화하고, 녹화 중 페이지 위에 그림·하이라이트·화살표·텍스트를 추가하거나 민감한 정보를 흐릴 수 있습니다. 클릭 위치는 편집기에서 자동 확대 지점으로 바뀌고, MP4·WebM·GIF로 내보낼 수 있습니다.

웹 앱에서 Chrome 확장 프로그램으로 바꾼 이유

Flicka는 처음에 브라우저 탭에서 실행하는 웹 앱으로 출시했지만, 웹 페이지는 다른 페이지 위에 그리거나 화면 녹화 중 특정 영역을 조작할 수 없습니다. 사용자가 녹화 중 가장 자주 하는 작업은 대상을 가리키거나 원을 그리고, 이메일 주소를 가리는 일인데 웹 앱만으로는 처리하기 어려웠습니다. 그래서 녹화기, 라이브러리, 편집기를 모두 Chrome 확장 프로그램 안에 넣었습니다.

녹화 설정은 “내 마이크와 자동 확대를 사용해 이 탭 녹화”처럼 한 문장으로 지정합니다. 문장 안의 단어를 눌러 녹화 대상을 바꿀 수 있습니다. 녹화 막대는 완전히 숨길 수도 있습니다. Chrome 확장 프로그램은 Chrome뿐 아니라 Edge, Brave, Arc에서도 작동하며 Mac과 Windows를 지원합니다.

로컬 처리와 복구

녹화한 영상과 오디오는 서버로 전송하지 않습니다. 캡션도 컴퓨터에서 단어 단위로 생성합니다. 계정 없이 녹화·편집·내보내기를 시작할 수 있어, 고객 정보가 화면에 보이는 데모를 만들 때 서버 업로드를 걱정하지 않아도 됩니다. Product Hunt 소개 글은 Loom이 계정과 클라우드 업로드를 기본으로 요구하는 것과 비교하면서, 일회성 데모에는 Flicka의 로컬 방식이 더 간단하다고 설명합니다.

녹화 중인 데이터는 1초마다 디스크에 기록합니다. Chrome 탭이나 브라우저가 중단되면 Flicka를 다시 열어 중간까지 저장된 테이크를 복원할 수 있습니다. 커서 데이터도 함께 저장하므로 자동 확대 지점도 복구됩니다.

자동 확대와 편집

클릭마다 생긴 자동 확대는 녹화 후 타임라인의 블록으로 표시됩니다. 블록을 끌어 위치를 옮기고, 길이를 늘리거나 줄이며, 확대 배율을 1.1배에서 4배 사이로 조정할 수 있습니다. 자동 확대를 삭제한 뒤 타임라인을 더블클릭해 직접 추가할 수도 있습니다. 자동 기능은 최종 결과가 아니라 편집의 시작점으로 작동합니다.

카메라 레이아웃은 말풍선 형태, 화면 옆 나란히 배치, 카메라만 표시하는 방식으로 구성할 수 있습니다. 타임라인에서 레이아웃이 움직이는 시점을 조절하며 전환에는 easing을 적용합니다. 무료 버전으로 사용할 수 있고, Pro 버전은 워터마크를 제거하며 MP4, 4K, 캡션 등 추가 기능을 제공합니다.

사용성 피드백과 남은 개선점

Product Hunt의 사용자는 설치나 계정 생성 없이 바로 시작하는 점과 클릭 자동 확대를 주요 장점으로 꼽았습니다. 초보적인 화면 녹화도 별도 편집 없이 제품 데모처럼 보이게 만들며, 녹화 중 민감한 정보를 발견했을 때 즉시 흐릴 수 있다는 점도 긍정적으로 평가했습니다. 반면 한 사용자는 편집기를 열기 전에 녹화 시작과 끝의 빈 구간을 간단히 잘라내는 in/out 트림 기능이 없어, 전체 타임라인을 다시 편집해야 한다고 지적했습니다.

Product Hunt 반응

• @robin_singh33 — 안녕하세요, Product Hunt 여러분 👋 지난주에 Flicka를 브라우저 탭에서 실행하는 화면 녹화기로 출시했습니다. 웹 앱이 왜 확장 프로그램이 되어야 했는지도 배웠습니다. 웹 페이지는 다른 페이지 위에 그릴 수 없습니다. 녹화 중 가장 하고 싶은 일은 무언가를 가리키거나, 원을 그리거나, 이메일 주소를 흐리는 일인데 탭은 그런 작업에 접근할 수 없습니다. 그래서 Flicka 1.0은 Chrome 확장 프로그램이 되었고, 녹화기와 라이브러리, 편집기를 모두 확장 프로그램 안에 넣었습니다. 새 기능은 다음과 같습니다. “내 마이크와 자동 확대를 사용해 이 탭 녹화”가 녹화 설정 전체를 한 문장으로 표현합니다. 단어를 눌러 내용을 바꿀 수 있습니다. 녹화 중 페이지 위에 그림, 하이라이트, 화살표, 텍스트를 추가하고 흐림 처리를 할 수 있습니다. 막대를 완전히 숨기는 것도 가능합니다. 탭, 화면, 창, 지정 영역, 카메라만 녹화할 수 있습니다. 테이크는 녹화 중 저장되므로 Chrome이 중단되어도 복구됩니다. 단어 단위 캡션은 컴퓨터에서 생성되며 오디오는 어디에도 전송하지 않습니다. 카메라 레이아웃은 말풍선, 나란히 배치, 카메라만 표시하는 방식으로 바꿀 수 있고 타임라인에서 움직임을 조절합니다. 녹화한 내용은 업로드하지 않으며, 녹화·편집·내보내기에 계정도 필요하지 않다는 점은 그대로입니다. 무료로 사용할 수 있고 Pro 버전은 워터마크를 제거하며 MP4, 4K, 캡션 등을 추가합니다. 무엇을 녹화할지, 무엇이 빠졌는지 알려주세요.
• @shubham_nair12 — 녹화 후에 자동 확대 지점을 옮기거나 조절할 수 있나요? 그러면 정말 유용하겠습니다.
  • @robin_singh33 — 네. 자동 확대 지점은 녹화 후 타임라인의 블록으로 표시됩니다. 드래그해서 위치를 옮기고, 길이를 늘려 지속 시간을 바꾸며, 1.1배에서 4배 사이로 확대 수준을 조절할 수 있습니다. 삭제한 뒤 더블클릭해 직접 추가할 수도 있습니다. 자동 기능은 시작점일 뿐입니다. 사용해주셔서 감사합니다.
• @roger_wang27 — 모든 처리를 기기 안에서 하는 점이 좋습니다. 특히 화면에 고객 정보가 보일 때 유용하겠습니다.
  • @robin_singh33 — 바로 그 상황 때문에 로컬 처리를 유지했습니다. 고객 데이터가 화면에 있다면 단순히 잘라내려고 누군가의 서버를 거칠 필요가 없습니다.
• @bonnie_lu27 — 녹화가 끝난 뒤에 무언가를 흐려야 했다는 사실을 잊은 적이 많습니다. 녹화 중에 처리할 수 있다는 점이 유용하겠습니다.
  • @robin_singh33 — 저도 같은 경험을 했고 그것이 이 기능을 만든 계기였습니다. 녹화 중 발견해서 바로 처리하면 전체를 다시 녹화하지 않아도 됩니다.
• @raaed_muggo12 — 한 문장으로 녹화를 설정하는 방식이 재미있습니다. 실제 녹화를 시작하기 전에 여러 곳을 클릭할 필요가 줄겠습니다.
  • @robin_singh33 — 감사합니다. 문장을 다시 읽는 동안 이미 녹화 설정이 끝나도록 만드는 것이 목표였습니다.
• @xun_jiang12 — 충돌 복구 기능이 눈에 들어옵니다. 녹화를 중간에 잃는 일은 최악입니다.
  • @robin_singh33 — 감사합니다. 바로 그 문제에서 시작한 기능입니다. 녹화 중 1초마다 디스크에 기록하므로 탭이나 브라우저가 중간에 종료되어도 Flicka를 다시 열면 테이크가 남아 있습니다. 커서 데이터도 함께 저장하므로 자동 확대 지점도 복구됩니다.
• @vriddhi_mittal27 — 클릭 시 자동 확대가 제가 가장 많이 사용할 기능일 것 같습니다. 제품 데모를 훨씬 따라가기 쉽게 만듭니다.
  • @robin_singh33 — 마음에 드셨다니 기쁩니다. 감사합니다.

원문: Product Hunt / 번역·요약: Trawling