Morph에는 300개 이상의 도구가 있습니다. 파일 변환, 이미지 편집, PDF 조작, 비디오 자르기, QR 생성, 색상 선택, 데이터 형식화, 폰트 변환 등 수십 가지가 있습니다. 이 숫자는 강점이지만, 동시에 디자인 문제이기도 합니다. 2초 안에 원하는 도구를 찾지 못한다면 300개가 있어도 없을 때와 다를 바 없습니다.
기존의 '브라우저' 페이지는 도구를 평면 그리드로 나열했습니다. Morph가 40개의 도구만 있을 때는 작동했지만, 300개가 되자 전화번호부처럼 되었습니다. 스크롤하고, 가까이서 보려고 애쓰고, 포기하고 도크를 사용했습니다. 이 경험은 충분하지 않았습니다.
새로운 Browse 페이지는 완전한 재설계입니다. 한 가지 아이디어를 중심으로 구축되었습니다: 모든 도구는 두 초 이내에 접근할 수 있어야 합니다. 원하는 것을 알고 있는지, 아니면 탐색하는 중인지에 관계없이 말이죠.
무엇이 변경되었나요
개선된 Browse 페이지는 Cormorant Garamond 폰트로 표시된 단일 헤드라인으로 시작됩니다: "모든 도구. 하나의 탭." 그 아래, 페이지는 사용자 의도에 맞는 네 가지 구분된 섹션으로 펼쳐집니다.
상단에는 Morph를 정의하는 도구를 강조하는 세 개의 기울기 카드가 있습니다: Morph Artboard (전체 이미지 편집기), Flowcut (비디오 편집기), QR 코드 생성기. 각 카드에는 약간의 떠오름과 확대 효과가 있는 호버 애니메이션이 있어 페이지 전체가 반응적이고 생동감 있게 느껴지지만 방해가 되지 않습니다. 모바일에서는 이러한 카드가 220px 폭으로 수평 스크롤에 깔끔하게 맞춰집니다.
추천 카드 아래, 인기 변환 필을 보여주는 행이 있습니다: PNG에서 JPEG, MP4에서 MP3, HEIC에서 JPG, PDF에서 텍스트, 웹P에서 PNG로의 변환. 이는 사람들이 가장 많이 검색하는 변환 쌍에 대한 단일 탭 단축키입니다. 메뉴나 드롭다운이 필요 없습니다. 필을 탭하고 파일을 드롭하면 완료됩니다.
더 아래로, 카테고리 카드는 모든 도구를 탐색 가능한 그룹으로 정리합니다. 각 카드는 유니크한 카테고리별로 3px 고정 두께의 색상 왼쪽 테두리, 형식 수 카운트 배지, 변환 쌍 수를 가지고 있습니다. 이미지 도구, 비디오 도구, 오디오 도구, 문서 도구, 개발자 도구, 데이터 도구 — 각 카테고리는 필터가 아닌 목적지입니다.
정확한 검색
페이지 상단 근처에 검색 표시줄이 있습니다. "300개 이상의 도구 검색..."이라고 표시되어 있으며, 입력할 때마다 전체 도구 디렉토리를 실시간으로 필터링합니다. 제출 버튼이 없습니다. 로딩 스피너도 없습니다. 모든 키 입력이 결과를 즉시 좁힙니다. 검색은 도구 배열에 대한 클라이언트 측에서 완전히 실행되기 때문입니다.
검색 입력이 포커스될 때, 미세한 주황색 빛이 주변에 나타납니다 — Morph에서 모든 활성 상태에 적용되는 동일한 #FF5200 강조 색상입니다. 텍스트가 입력되면 작은 클리어 버튼이 나타나며, 단일 탭으로 검색을 재설정할 수 있습니다.
이것은 의도적으로 간단합니다. 흐린 매칭, 순위 알고리즘, AI 기반 추천 엔진이 없습니다. 단순한 텍스트 필터입니다. 도구 이름과 설명이 명확하게 작성되어 있고, 이 규모의 클라이언트 측 필터링이 실제로 즉시 작동하기 때문입니다. 때로는 가장 좋은 검색 경험은 지연 시간이 없는 것입니다.
카테고리가 목적지가 되다
대부분의 도구 디렉터는 카테고리를 필터로 다룹니다. 드롭다운에서 카테고리를 선택하면 그리드가 하위 집합으로 다시 렌더링됩니다. 이 방법은 작동하지만, 탐색 경험을 거래적인 것으로 평평하게 만듭니다. 당신은 원하는 것을 알고, 필터를 적용하고 떠납니다.
새로운 브라우저 페이지는 카테고리별로 다르게 처리합니다. 각 카테고리 카드에는 지원되는 형식 수와 사용 가능한 변환 쌍 수가 표시됩니다. 이미지 도구 카드는 단순히 '이미지'라고 표시하지 않고, 15개 이상의 형식과 80개 이상의 변환 쌍이 사용 가능하다고 알려줍니다. 이 정보는 라벨을 탐색을 유도하는 초대장으로 바꿉니다.
카드는 각각 30밀리초 간격으로 뷰포트에 나타납니다. 마우스를 올리면 유리 패널 효과가 활성화됩니다: 다중 레이어 박스 쉐이드와 백드롭 블러가 결합되어 깊이 효과를 만들어 카드가 표면에서 들어올라오는 듯한 느낌을 줍니다. 이는 장식적인 요소가 아닙니다. 카드는 현재 위치와 상호작용 가능한 대상을 알려주는 피드백 메커니즘입니다.
모든 애니메이션은 prefers-reduced-motion 미디어 쿼리를 존중합니다. 운영 체제에서 모션 감소가 설정되어 있으면, 스테이터와 호버 효과가 비활성화됩니다. 접근성은 이 후에 추가되는 것이 아니라, 모든 상호작용에 내장되어 있습니다.
추천 도구
Browse의 상단에 있는 세 개의 주요 카드는 알고리즘에 의해 결정된 것이 아니라 수작업으로 선택되었습니다. 인기 순위, A/B 테스트, 참여 지표가 헤로에 들어가는 것을 결정하는 것이 아닙니다. 주요 도구는 Morph가 가장 잘하는 것을 대표하기 때문에 선택되었습니다.
Morph Artboard는 레이어, 마스크, 블렌드 모드, AI 기반 기능인 생성 채움 및 객체 제거와 같은 전체 이미지 편집기입니다. Flowcut은 타임라인 편집, 컬러 그레이딩, 속도 램프, LUT 지원 및 YouTube, Instagram, TikTok, GIF용 내보내기 프리셋이 있는 브라우저 기반 비디오 편집기입니다. QR 코드 생성기는 사용자 정의 가능한 색상과 크기로 즉시 스캔 가능한 코드를 생성합니다.
이것들이 강조할 만한 유일한 도구는 아닙니다. 그러나 큐레이션은 선택을 의미합니다. 세 개의 카드, 세 가지 도구, 명확한 메시지 하나: Morph는 단순한 파일 변환기가 아닙니다. 그것은 창의적 플랫폼입니다.
이것이 중요한 이유
300개 항목이 있는 도구 디렉토리는 제품이 아닙니다. 그것은 스프레드시트입니다. 제품은 사용자가 Browse를 열고 필요한 것을 찾는 순간 사이에서 일어나는 것입니다. 이 간격은 스크롤이 아닌 초로 측정되어야 합니다.
좋은 도구는 눈에 띄지 않습니다. 검색하고, 찾고, 사용하세요. 문서를 읽거나 튜토리얼을 보거나 계정을 만들 필요가 없습니다. 새로운 'Browse' 페이지는 이 원칙을 기반으로 설계되었습니다. 모든 화면에 표시된 내용은 도구를 찾는 데 도움을 주거나, 모르는 도구를 보여주는 데 사용됩니다.
회원 가입이 필요하지 않습니다. 업로드가 필요하지 않습니다. 대부분의 도구는 서버 없이 브라우저에서 완전히 작동합니다. 파일은 디바이스에 그대로 유지됩니다. 이 프라이버시 보장은 마케팅 문구가 아닙니다 — 아키텍처 자체입니다. Morph는 WebAssembly와 JavaScript를 사용하여 파일을 클라이언트 측에서 처리합니다. AI 기능을 명시적으로 사용하지 않는 한 서버에 접촉하지 않습니다. 또한 AI 기능을 사용할 때도 처리는 Cloudflare Workers에서 이루어지며 저장 또는 로깅이 없습니다.
300개 이상의 도구가 하나의 앱에 있지만 찾을 수 없다면 의미가 없습니다. Browse 재설계로 올바른 도구를 찾는 것이 사용하는 것보다 빠릅니다.
Morph가 파일 변환을 넘어 무엇을 할 수 있는지 탐색해보지 않았다면, Browse 페이지가 시작하기에 가장 좋은 곳입니다. 이미지 압축, 비디오 편집, 폰트 변환, 메타데이터 추출, 암호화, 차트 생성, 이력서 작성 — 모든 기능이 정리되고 검색 가능한 형태로 제공됩니다.
Browse 페이지를 열고 원하는 것을 입력하거나, 아무것도 입력하지 않고 스크롤만 해도 됩니다. 도구를 찾을 수 있을 것입니다. 예를 들어 이미지 압축기나 무료 비디오 편집기와 같이 브라우저에서 완전히 실행되는 도구를 발견할 수 있습니다.
모든 도구. 한 탭. 클러터 없음.