하나의 타투 텍스트 도구를 세 가지 서로 다른 워크플로우로 분리하다
요약
타투 텍스트 도구를 사용자 목적에 따라 폰트 미리보기, 이름 계획, AI 레터링 생성의 세 가지 워크플로우로 분리하여 제품 경험을 최적화하는 과정을 다룹니다.
핵심 포인트
- 사용자 니즈에 따른 워크플로우 분리로 제품 복잡도 해결
- 단순 폰트 비교와 구조적 계획, AI 생성의 차이점 명시
- 목적에 맞는 인터페이스 제공을 통한 사용자 경험 개선
처음에 저는 모든 타투 텍스트 도구가 하나의 단순한 워크플로우를 공유할 수 있다고 가정했습니다:
텍스트를 입력하고, 스타일을 선택한 뒤, 결과를 미리 본다.
그 가정은 초기 버전에서는 통했습니다.
하지만 그것은 너무 광범위한 제품을 만들어냈습니다.
폰트를 비교하는 사람, 이름 타투를 계획하는 사람, 그리고 AI에게 맞춤형 레터링 (lettering) 생성을 요청하는 사람은 모두 박스에 단어를 입력할 수는 있지만, 그들이 수행하려는 작업은 동일하지 않습니다.
시간이 흐르면서, 저는 원래의 아이디어를 세 가지 워크플로우로 분리했습니다:
- 타투 폰트 미리보기 (Tattoo font preview)
- 이름 타투 계획 (Name tattoo planning)
- AI 타투 레터링 구성 (AI tattoo lettering composition)
인터페이스는 여전히 겹치지만, 기대되는 결과물은 매우 다릅니다.
워크플로우 1: 타투 폰트 미리보기
첫 번째 사용자는 이미 어떤 텍스트를 원하는지 알고 있습니다.
그들의 주요 질문은 대개 다음과 같습니다:
- 이 단어가 필기체 (script)로는 어떻게 보일까?
- 올드 잉글리시 (Old English) 스타일은 너무 무거울까?
- 이 날짜가 계속 읽기 쉬운 상태로 유지될까?
- 세리프 (serif), 산세리프 (sans serif), 또는 손글씨 레터링 (handwritten lettering) 중 무엇을 사용해야 할까?
- 간단한 미리보기를 다운로드할 수 있을까?
이것은 AI 생성을 필요로 하지 않습니다.
빠른 폰트 작업대 (font workbench)가 필요합니다:
- 텍스트 입력
- 폰트 카테고리 탐색
- 크기 조절
- 가독성 있는 옵션 비교
- 간단한 미리보기 다운로드
결과물은 의도적으로 제한되어 있습니다.
이것은 폰트 참조용이지, 맞춤형 타투 구성이 아닙니다.
이 차이는 중요합니다. 꽃, 그림자, 프레임, 심볼, 그리고 장식적인 요소들을 추가하는 것은 글자 형태 (letterforms)만 비교하고 싶은 사용자들에게 도구를 더 느리고 예측 불가능하게 만들기 때문입니다.
워크플로우 2: 이름 타투 계획
이름 타투는 폰트 문제처럼 들리지만, 종종 구조의 문제가 됩니다.
입력값에 따라 다르게 동작합니다:
- 짧은 이름
- 이니셜 (Initials)
- 앰퍼샌드 (&)로 연결된 두 이름
- 하이픈으로 연결된 이름
- 날짜가 포함된 이름
- 더 긴 다중 단어 문구
예를 들어, Mia는 표현력이 풍부한 필기체 (script lettering)를 지원할 수 있습니다.
A.B. 2014는 대개 더 압축적이고 구조적인 방향이 필요합니다.
Mia & Noah는 두 이름 사이의 균형을 도입합니다.
Anne-Marie는 두 개의 별개 단어처럼 취급되어서는 안 됩니다.
전용 이름 워크플로우 (Name workflow)의 유용한 점은 사용 가능한 모든 폰트 (Font)를 보여주는 것이 아닙니다. 이름의 구조에 어떤 종류의 레터링 (Lettering) 방향이 어울리는지 사용자가 결정하도록 돕는 것입니다.
그 결과, 저는 입력을 분류하고 더 적은 수의 방향을 추천하는 집중된 Name Tattoo Generator를 구축하게 되었습니다.
이 도구는 전체 폰트 브라우저 (Font browser)를 대체하려고 시도하지 않습니다.
대신 계획을 위한 진입점 (Planning entry point) 역할을 합니다.
워크플로우 3: 커스텀 타투 레터링 생성하기
세 번째 사용자는 폰트 미리보기를 넘어서는 무언가를 원합니다.
그들은 다음과 같은 것을 요청할 수 있습니다:
- 꽃이 포함된 이름
- 장식적인 프레임 (Ornamental framing)이 있는 날짜
- 부드러운 음영 (Soft shading)이 들어간 치카노 레터링 (Chicano lettering)
- 절제된 장식 (Flourishes)이 있는 문구
- 기호와 결합된 이니셜
- 추모를 위한 구성 (Memorial composition)
- 단순한 텍스트 샘플이 아닌 커스텀 배치
이 지점이 바로 AI 생성 (AI generation)이 유용해지는 구간입니다.
또한 이는 어려운 문제를 야기합니다. 모델은 반드시 나타나야 하는 텍스트와, 추가적인 단어로 나타나지 말아야 할 시각적 지침 (Visual instructions)을 구분해야 합니다.
사용자가 다음과 같이 입력할 수 있습니다:
Exact Text:
Amelia
그다음 다음과 같이 추가합니다:
Supporting Details:
Soft shading, subtle drips, wider spacing
명확한 경계가 없다면, 모델은 보조 설명의 일부를 텍스트로 렌더링하려고 시도할 수 있습니다.
따라서 인터페이스는 두 개의 필드를 분리합니다.
Exact Text (정확한 텍스트)
반드시 정확하게 나타나야 하는 글자들입니다.
Supporting Details (보조 상세 정보)
장식, 간격, 분위기, 음영, 기호 및 구성에 관한 지침입니다.
그 후 AI Tattoo Lettering Generator는 정확한 텍스트를 글자 하나하나 보존하려고 노력하면서 시각적 참조 (Visual reference)를 구축합니다.
이는 폰트를 선택하는 것과는 다른 제품적 역할입니다.
출력물은 더 이상 단순한 미리보기가 아닙니다. 이는 추후 타투 아티스트와의 상담을 지원할 수 있는 커스텀 시각적 방향성입니다.
검색 데이터가 드러낸 중첩 영역
제가 제품 구조를 다시 검토하게 된 한 가지 이유는, 검색 엔진이 이름(name), 폰트(font), 레터링(lettering), 그리고 텍스트(text) 관련 검색어들을 계속해서 동일한 광범위한 폰트 페이지와 연관시키고 있었기 때문입니다.
다음과 같은 쿼리(queries)들은 서로 비슷해 보일 수 있습니다:
tattoo font generator
name tattoo generator
tattoo lettering generator
...
하지만 이러한 검색어들이 암시하는 인터페이스(interface)는 동일하지 않습니다.
폰트 생성기(font generator)는 비교(comparison)에 최적화되어야 합니다.
이름 생성기(name generator)는 가이드(guidance)에 최적화되어야 합니다.
AI 레터링 생성기(AI lettering generator)는 커스텀 구성(custom composition)에 최적화되어야 합니다.
하나의 페이지가 모든 변형을 처리하도록 만들려다 보면, 모든 것을 언급하지만 그 어떤 단일 작업도 특별히 잘 수행하지 못하는 페이지가 만들어질 수 있습니다.
페이지 분리가 항상 정답은 아닙니다
이것이 모든 키워드가 각자의 경로(route)를 가져야 한다는 의미는 아닙니다.
사소한 문구 차이 때문에 별도의 페이지를 만드는 것은 빈약하고 반복적인 콘텐츠를 양산할 뿐입니다.
이번 분리가 의미가 있었던 이유는 세 가지 워크플로우(workflow)가 서로 다른 다음 요소들을 가지고 있었기 때문입니다:
- 사용자 의도 (User intent)
- 인터페이스 요구사항 (Interface requirements)
- 출력 형식 (Output formats)
- 제품 경계 (Product boundaries)
- 다음 행동 (Next actions)
제가 현재 사용하는 테스트 기준은 다음과 같습니다:
이 사용자가 의미 있는 수준에서 다른 워크플로우를 필요로 하는가, 아니면 단지 다른 문구만을 필요로 하는가?
워크플로우가 동일하다면 아마도 하나의 페이지로 유지되어야 합니다.
제어 방식(controls)과 기대 결과(expected result)가 진정으로 다르다면, 별도의 도구를 만드는 것이 정당화될 수 있습니다.
더 넓은 관점에서의 교훈
많은 제품이 가장 빠르게 출시할 수 있는 방법인 광범위한 입력창(input box)에서 시작합니다.
이는 테스트 단계에서는 유용합니다.
하지만 하나의 입력창은 여러 개의 뚜렷한 작업(jobs)을 숨기고 있을 수 있습니다.
다음 단계가 항상 동일한 화면에 더 많은 옵션을 추가하는 것을 의미하지는 않습니다. 때로는 옵션을 제거하고 더 명확한 경로를 만드는 것을 의미합니다.
이 사례의 경우, 최종 구조는 다음과 같이 되었습니다:
Font preview
→ Compare letterforms
...
도구들은 서로 연관되어 있지만, 더 이상 동일한 제품인 척하지 않습니다.
그러한 분리를 통해 인터페이스를 설명하기가 더 쉬워졌고, 유지보수(maintain)가 용이해졌으며, 각 출력이 실제로 무엇을 할 수 있는지에 대해 더 정직해졌습니다.
다음에 제가 다르게 할 일
저는 여전히 하나의 광범위한 워크플로우 (workflow)로 시작할 것입니다.
그것은 사용자들이 해당 문제에 실제로 관심을 가지고 있는지 알아낼 수 있는 가장 빠른 방법인 경우가 많기 때문입니다.
하지만 저는 사용자들이 서로 다른 결과물을 요구하기 시작하는 지점에 더 세심한 주의를 기울일 것입니다.
어떤 사용자들은 속도와 예측 가능성 (predictability)을 원합니다.
어떤 이들은 가이드 (guidance)를 원합니다.
어떤 이들은 맞춤형으로 생성된 구성 (composition)을 원합니다.
그러한 차이점들은 결국 인터페이스 (interface)에 나타나야 합니다.
광범위한 MVP (Minimum Viable Product)는 발견 (discovery)을 위해 유용합니다.
더 명확하고 집중된 워크플로우 (workflow) 세트는 성장 (growth)을 위해 유용합니다.
AIMakeTattoo의 경우, 현재 분리된 구조는 다음과 같습니다:
- 글자 형태 (letterforms)를 비교하려면 폰트 워크플로우 (font workflow)를 사용합니다.
- 방향성을 좁히려면 이름 워크플로우 (name workflow)를 사용합니다.
- 더 맞춤화된 시각적 참조 (visual reference)를 만들려면 AI 레터링 워크플로우 (AI lettering workflow)를 사용합니다.
다음 과제는 더 많은 옵션을 추가하는 것이 아닙니다.
각 경로를 더 쉽게 발견할 수 있도록 만들고, 경로 간의 전환 (handoff)이 자연스럽게 느껴지도록 만드는 것입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기