솔직히 고백합니다.
주니어 딱지를 떼기도 전, 커스텀 커서 디자인을 맡은 적이 있습니다.
클라이언트 요청은 늘 그렇듯 추상적이었죠.
"뭔가 미래지향적이면서, 엣지 있게."
저는 신나서 Figma를 켰습니다.
반투명한 글래스모피즘(Glassmorphism)을 적용하고, 그림자도 은은하게 넣었습니다.
누가 봐도 '요즘 느낌' 나는 세련된 커서였죠.
결과는 어땠냐고요?
사용성 테스트(UT)에서 처참하게 깨졌습니다.
사용자들이 버튼을 제대로 못 누르더군요.
"이거 어디를 눌러야 클릭이 되는 거예요?"
심지어 배경색이 밝은 페이지에서는 커서가 아예 안 보인다는 피드백까지 받았습니다.
개발자분은 난감한 표정으로 묻더군요.
"다은 님, 이거 핫스팟(Hotspot) 좌표가 정확히 어디예요? 센터예요, 아니면 좌상단 0,0이에요?"
아차 싶었습니다.
저는 '그림'을 그리고 있었지, '인터페이스'를 설계한 게 아니었던 겁니다.
그때의 쪽팔림을 안고 방황하던 중, 우연히 이 사이트를 발견했습니다.
'Amiga Pointer Archive'
1980~90년대 전설적인 컴퓨터 '아미가(Amiga)' 시절의 마우스 커서들을 모아놓은 아카이브이자 에디터입니다.
처음엔 그냥 레트로 감성 팔이 사이트인 줄 알았습니다.
그런데 에디터를 뜯어보다가 머리를 한 대 맞은 것 같았습니다.
여기엔 제가 놓쳤던 UI의 본질이 전부 들어있었거든요.
미대생의 감성을 빼고, 공대생의 논리로 이 투박한 도트들을 분석해 봤습니다.
1. 핫스팟(Hotspot)에 대한 집착
이 사이트의 에디터 기능을 보면 'Hotspot Set'이라는 버튼이 있습니다.
단순히 그림을 그리는 게 끝이 아닙니다.
클릭이 발생하는 1px의 지점을 명확히 정의해야 저장이 됩니다.
요즘 우리는 벡터 툴에서 대충 도형을 그리고 '가운데 정렬'을 맞춥니다.
하지만 30년 전 디자이너들은 16x16 그리드 안에서 '사용자가 어디를 가리키고 있다고 느낄까?'를 픽셀 단위로 고민했습니다.
화살표 끝이 뭉툭하면 클릭 정확도가 떨어지니까요.
그 고민의 흔적이 뾰족하게 날이 선 픽셀 배치에서 보였습니다.
2. 극단적인 가시성(Visibility)
아미가 커서들은 배경이 무슨 색이든 상관없이 눈에 확 띕니다.
이유는 단순합니다.
모든 커서 외곽에 흰색/검은색의 강력한 대비(Contrast)를 줬기 때문입니다.
저는 '엣지 있는 디자인'을 한답시고 반투명 효과를 썼다가 가시성을 말아먹었죠.
디자인은 예술이 아니라 설득이고, 정보 전달입니다.
커서의 제1목적은 '내 위치 확인'이라는 걸 이 투박한 도트들이 말해주고 있었습니다.
3. 형태가 곧 기능 (Affordance)
카테고리를 보면 동물, 화살표, 손, 십자선(Crosshair) 등으로 나뉘어 있습니다.
재미있는 건, 픽셀 몇 개만 찍혔는데도 이게 '텍스트 입력 모드'인지, '로딩 중'인지, '정밀 타격'인지 바로 알 수 있다는 겁니다.
해상도가 낮다는 건 핑계였습니다.
오히려 제한된 픽셀 안에서 의미를 전달하기 위해 불필요한 장식을 걷어내고 핵심 형태(Metaphor)만 남긴 것이죠.
이 사이트를 보고 나서 제 디자인 프로세스를 싹 뜯어고쳤습니다.
이제 아이콘이나 커서를 디자인할 때 세 가지를 자문합니다.
- 눈을 흐릿하게 뜨고 봐도 형태가 구분되는가? (Squint Test)
- 클릭되는 좌표(0,0)가 시각적으로 명확한가?
- 개발 가이드에 핫스팟 좌표를 명시했는가?
Figma에서 벡터로 쓱쓱 그리는 건 쉽습니다.
하지만 그게 실제 구현되었을 때, 사용자의 마우스 끝에서 어떤 경험을 줄지는 픽셀 단위의 집착에서 나옵니다.
"다은 님, 이번 가이드는 진짜 변태 같네요. (칭찬임)"
개발자분께 이 말을 들었을 때의 짜릿함이란.
화려한 그래픽에 취해 본질을 잊은 것 같다면, 가끔은 이런 고전 유물을 들여다보세요.
제약이 창의성을 만든다는 말,
그리고 튜닝의 끝은 순정이라는 말은 UI 디자인에서도 진리니까요.
