Alt 에디터

역할

단독 프로덕트 디자이너

프로덕트 디자이너 1 · 프론트엔드 개발자 1 · 백엔드 개발자 1

기간

2022–2023

형태

웹 서비스

관련 링크

01 / 프로젝트 개요

음성을 자막 초안으로
바꾸는 편집기

Alt 에디터는 음성에서 자막 초안을 만든 뒤 문구와 표시 시간을 고쳐 자막 파일로 저장할 수 있는 웹 편집기입니다.

02 / 문제와 제약

초보자와 숙련자의
다른 요구

자막을 만들려면 음성을 글자로 옮기고, 화면에 나타나는 시간을 맞추고, 내용을 확인하는 일을 반복해야 합니다. 초보자와 숙련자에게 필요한 조작 방식은 서로 달랐습니다.

초보자

다음 행동이 보여야 함

작업 순서가 낯설기 때문에 단축키를 몰라도 버튼과 안내만 보고 진행할 수 있어야 했습니다.

숙련자

반복 동작을 줄여야 함

재생, 수정, 시간 조정 때마다 마우스와 키보드를 오가면 작업 속도가 느려졌습니다.

03 / 해결 과정

마우스와 키보드를
한 화면에

같은 편집기에서 두 가지 조작 방식을 제공했습니다

초보자에게 제공한 방식
마우스 중심
화면에 보이는 버튼
마우스만으로 끝까지 작업
첫 사용 안내
숙련자에게 제공한 방식
키보드 중심
Alt 단축키
키보드만으로 반복 작업
화면 아래 단축키 안내
같은 편집기 화면
초보자용과 숙련자용 화면을 따로 만들지 않고 버튼과 단축키를 함께 제공
  1. 01

    브라우저와 겹치지 않는 단축키 만들기

    브라우저 기능과 겹치지 않는 Alt 키 조합을 정하고, 사용할 수 있는 단축키를 편집기 아래에 계속 표시했습니다.
  2. 02

    지금 편집 중인 자막 보여주기

    선택한 자막과 수정 여부를 구분하고, 막혔을 때 사용법을 바로 확인할 수 있게 했습니다.
  3. 03

    작은 노트북에서도 잘리지 않게 하기

    네 가지 노트북 화면 크기를 확인해 13인치 화면에서도 주요 기능이 잘리지 않게 했습니다.
Alt 에디터의 1024×650 작은 노트북 화면 시안
1024×650 작은 노트북 화면 시안
Alt Editor 반응형 디자인
네 가지 노트북 화면 크기 대응 시안

04 / 결과

재사용한 설계와
측정하지 못한 것

확인한 결과

누적 사용자 3,000명+

출시 후 누구나 사용할 수 있는 서비스로 운영했습니다.

재사용

회사 번역가 도구에 적용

버튼과 단축키를 함께 제공하는 방식, 선택한 자막을 보여주는 방식을 이후 번역가용 편집기에도 활용했습니다.

측정하지 못한 것

초보자가 작업을 끝까지 마쳤는지

첫 방문부터 자막 파일 저장까지 어디에서 멈췄는지는 기록하지 못했습니다.
다음 프로젝트

웹사이트 디자인·개발

프로젝트 보기