코너 버튼을 네 모서리에 둔 이유
떠 있는 조각에 액션을 어디에 둘지 고민했어요. 결국 자주 쓰는 4개는 코너 버튼에, 나머지 전부는 우클릭 메뉴에 나눠 담았어요.
Floatie에서 화면 일부를 캡처하면 파일로 저장되지 않고 그 자리에 조각으로 떠요. 뜬 조각은 화면 위에 계속 남아 있으니 뭔가 할 수 있어야 해요. 편집하거나, 문자를 인식하거나, 색을 추출하거나, 결국 닫거나 하는 식이에요.
이 액션들을 어디에 둘지가 초기 설계에서 가장 오래 고민한 부분이에요. 액션은 열 가지 가까이 되는데, 조각 하나에 다 보여줄 수는 없었어요. 저는 고정 툴바는 만들지 않기로 했고, 대신 코너 버튼과 우클릭 메뉴로 역할을 나눴어요.
툴바를 만들지 않은 이유
조각 위나 옆에 고정 툴바를 얹는 방법도 생각해봤어요. 그런데 툴바가 캡처한 내용을 가리거나, 조각을 작게 줄이면 밀려서 레이아웃이 깨졌어요. 캡처 조각은 크기가 제각각이라 고정폭 툴바와 안 맞고 화면 구석에 작게 띄워둘수록 더 심했는데, 저는 이 방식은 쓰지 않기로 했어요.
코너 버튼과 우클릭 메뉴의 역할 분담
조각을 우클릭하면 메뉴가 떠요. 복사, 다른 형식으로 저장, 공유, 편집, 텍스트 복사, 크기 초기화, 90° 회전, 불투명도 조절, 항상 위 고정, 닫기까지 웬만한 동작은 다 여기 들어 있어요.
다만 메뉴는 열어보기 전엔 안이 안 보여요. 그래서 마우스를 올리면 바로 보이는 자리에 가장 자주 쓰는 4개만 코너 버튼으로 따로 뒀어요. 나머지는 하나에 다 몰아넣는 대신 우클릭 메뉴에 그대로 남겨뒀어요.
그래서 네 모서리
지금 Floatie는 조각 네 모서리에 버튼을 하나씩 둬요. 모서리는 대체로 캡처한 내용의 중심에서 비어 있는 자리라 콘텐츠를 덜 가려요. 사각형인 조각에는 자연스럽게 모서리가 넷이라, 다섯 개나 여섯 개로 늘리는 것보다 낫다고 봤어요.
버튼은 고스트(Pro), 항상 위 고정(Pro), 편집(Pro), 문자 인식(OCR, Pro), 축소/확대, 좌우 반전(Pro), 색 추출, 귀여운 플로트, 공유, 닫기까지 10가지 중에서 고를 수 있고, 자리를 비워둘 수도 있어요. 각 버튼은 SF Symbol 아이콘 하나로 표시돼서, 라벨을 안 읽어도 모양만으로 구분되게 했어요. 예를 들어 고스트는 cursorarrow.rays, 편집은 square.and.pencil, 문자 인식은 text.viewfinder 아이콘을 써요.
기본 배치는 좌상단 고스트, 우상단 편집, 좌하단 문자 인식, 우하단 축소/확대예요. 넷 중 셋(고스트·편집·문자 인식)이 Pro 기능이고, 무료로 그대로 쓸 수 있는 건 우하단 축소/확대뿐이에요. 저는 14일 체험 동안 자주 쓰는 기능을 먼저 눈에 띄는 자리에 두고 싶어서 이렇게 배치했어요.
축소/확대 버튼은 조각 크기에 따라 아이콘 자체가 축소 모양과 확대 모양으로 바뀌어요. 누르기 전에 지금 상태를 알 수 있게 하려는 의도예요. 저는 다른 버튼들도 언젠가 상태에 따라 아이콘이 바뀌면 좋겠다고 생각해요.
원하는 대로 바꾸기
설정 → 모양 → 코너 버튼에서 네 자리에 원하는 액션을 다시 고를 수 있어요. 이미 다른 자리에 배정된 액션을 고르면 두 자리가 자동으로 맞바뀌어요. 온보딩 두 번째 단계에서도 이 화면을 먼저 보여주면서 각 모서리에 뭘 넣을지 고르게 해요.
클릭이 조각을 그대로 통과해요
녹화 중 뜨는 미리보기는 캡처 조각과는 다른 버튼 구성을 써요. 캡처와 녹화는 그다음에 하고 싶은 일이 다르다고 봤기 때문이에요. 공유와 닫기만 두 구성 모두에 공통으로 들어가요.
모서리가 정답이라고 생각하진 않아요. 다만 저에게는 콘텐츠를 가리지 않으면서 자주 쓰는 액션을 바로 보여주는 절충안이 이거였어요. 네 개라는 숫자도, 지금 배치도 앞으로 얼마든지 바뀔 수 있다고 봐요.
이제 띄워볼까요?
14일 동안 모든 기능이 무료예요. 그다음엔 Floatie Pro를 한 번만 구매하면 계속 쓸 수 있고요. 구독이 아니에요.