개발 일지 / Fluffmark

Fluffmark 개발 일지: 이미지 주석을 즐겁게 만들기

Fluffmark가 자동 텍스트 레이아웃, 제목 줄 바꿈, 텍스트 브러시, 애니메이션 스트로크 및 플랫폼별 상호 작용을 통해 공유 주석 구성 요소에서 자체 앱으로 성장한 방법입니다.

플러프마크
플러프마크

아이디어는 어디서 나왔는지

Fluffmark는 재미있는 유래를 가지고 있습니다. 나는 모든 이미지 앱에 대한 공유 주석 구성 요소를 구축하려고 했습니다. 작업을 하다보니 의외로 제품 자체에 대한 열정이 생겼습니다. 나는 그것을 사용하여 단어와 함께 사진을 게시하는 데 사랑에 빠졌고 더 많은 것을 표현하고 싶어했습니다.

앱의 기능

기능을 바로 살펴보겠습니다.

  1. 먼저, 스틸 이미지, GIF, 라이브 포토를 처리하는 이미지 주석 앱입니다. 가져온 것과 동일한 종류의 형식을 내보냅니다. GIF 및 Live Photo의 주석은 오버레이로 추가되어 기본 애니메이션을 유지합니다.

  2. 주석 도구에는 다음이 포함됩니다.

    1. 텍스트 추가

    2. 양쪽 끝에 구성 가능한 화살촉이 있는 선 그리기

    3. 자유형 그리기

    4. 흐림

    5. 픽셀화

    6. 직사각형

    7. 서클

    8. 이미지 삽입

    9. 캔버스 자르기 또는 확장

    10. 둥근 모서리

가장 많이 고려한 기능에 집중하겠습니다.

텍스트 추가

내 친구 Xiaoyun과 Xiaoyu는 WeChat Moments에 직접 글을 쓴 사진을 자주 게시했습니다. 문체나 위치를 조정하지 않고 그냥 단어만 쓰면 얼마나 좋을까 하는 생각이 들었습니다. 그래서 저는 몇 가지 유용한 세부정보가 포함된 자동 텍스트 레이아웃을 만들었습니다.

  1. 자동으로 피사체를 피하세요. 사진의 내용을 방해하지 않는 텍스트 위치를 찾으세요.

  2. 색상을 자동으로 일치시킵니다. 이미지의 주요 색상을 사용하여 여러 텍스트 팔레트를 제안합니다. 일반적으로 기본값은 이미 좋아 보입니다.

    자동 레이아웃 및 색상 일치
    자동 레이아웃 및 색상 일치

일반적인 텍스트 컨트롤 외에도 몇 가지 특이한 기능을 추가했습니다.

  1. 주제를 둘러쌉니다. 주요 피사체(주로 사람)의 윤곽선을 따라 단어를 배열하여 감싸는 효과를 만듭니다.

    주제 주변의 텍스트 감싸기
    주제 주변의 텍스트 감싸기
  2. 텍스트 브러시. 예상치 못한 모양으로 단어를 더 자유롭게 그릴 수 있는 수동 주제 배치라고 생각하세요.

    텍스트 브러시
    텍스트 브러시
  3. 적응형 투톤 텍스트. 각 문자는 아래 이미지에 따라 검은색이나 흰색으로 전환되어 대비가 더욱 강해집니다.

    적응형 투톤 텍스트
    적응형 투톤 텍스트
  4. WeChat 채팅 풍선. 최근 추가된 이 기능은 친숙하고 눈길을 끄는 WeChat 대화 모양을 재현합니다. 처음에는 자신과 상대방의 아바타 이미지를 선택하고 다음에 다시 사용하세요.

    WeChat 채팅 거품
    WeChat 채팅 거품

자유형 그리기

  1. 서예 브러시 스트로크. 이 프로젝트에는 초기 서예 브러시 데모를 가져왔습니다. Fluffmark는 매우 사실적인 잉크 스트로크를 생성할 수 있습니다. 단순한 손으로 그린 ​​원이라도 일반 디지털 브러시 자국보다 표현력이 훨씬 뛰어납니다.

    둥근 모서리도 표시된 서예 브러시 스트로크
    둥근 모서리도 표시된 서예 브러시 스트로크
  2. 스트로크를 재생합니다. Live Photo를 편집할 때 스트로크 재생을 활성화합니다. 내보낸 Live Photo에는 마치 다시 쓰는 것처럼 그림이 움직이는 모습이 나타납니다.

    애니메이션 스트로크 재생
    애니메이션 스트로크 재생

이미지

이미지를 삽입할 때 해당 주제도 추출할 수 있습니다. 그러면 모든 종류의 재미있는 콜라주 가능성이 열립니다.

이미지 삽입 및 주제 추출
이미지 삽입 및 주제 추출

기타 세부사항

나는 이 앱을 다듬는 데 오랜 시간을 보냈으며 매일 사용하고 있습니다. 상호작용 세부정보 중 일부는 다음과 같습니다.

  1. 이미지에 도구를 사용하는 동안 인터페이스가 숨겨지므로 전체 그림을 볼 수 있습니다.

  2. 이미지 그리기와 확대/축소는 서로 간섭하지 않습니다.

  3. 툴바는 작은 공간이 잘 작동할 수 있도록 많은 수정을 거쳤습니다.

  4. 이 앱은 iOS, iPadOS, macOS에서 사용할 수 있습니다. Mac에서는 이미지 드래그, Finder 기반 열기 및 저장 대화 상자 사용, 키보드 단축키 지원 등 플랫폼별 개선 사항을 적용했습니다.

가격

이것은 또한 선택적 재정 지원만 포함된 최초의 완전 무료 제품이라고 설명합니다. 마음에 드신다면 18위안을 한 번 기부하시거나 연간 18위안을 기부해 제가 더 좋고 저렴한 제품을 만드는 데 도움을 주실 수 있습니다. 기여하지 않기로 선택해도 기능에는 영향을 미치지 않습니다. 나는 농담으로 그것을 내 인터넷 구걸의 시작이라고 부릅니다.

다른 앱과 마찬가지로 손에 쥐는 일이 많지 않습니다. 도구를 사용해 보고 탐색해 보세요. 실행 취소 및 다시 실행 기능이 잘 발달되어 있으므로 실험하는 동안 작업 내용을 잃을 염려가 없습니다. 마음껏 사용하시고, 자신을 표현하는 데 더 많은 영감을 얻으시길 바랍니다.