핀테크 프로덕트 디자이너가 고려해야 할 텍스트 디테일
금융 분야 프로덕트 디자이너가 숫자를 다룰 때 알아두면 좋을 Tip 4
들어가며
금융 및 핀테크 분야는 소위 돈이 오가는 곳이기 때문에, 특히 텍스트에 대한 디테일을 세심하게 고려해야 한다. 종목, 수익률, 거래 금액 등 표현 하나가 사용자 경험에 큰 영향을 줄 수 있기 때문이다. 이를 위해 기획 및 개발 등 이해관계자와 함께 규칙을 정의하고, 일관된 디자인을 유지하는 것이 필요하다.
물론 가장 효율적인 방법은 디자인 시스템을 갖추는 것이지만, 현실적으로 작은 조직에서는 1인 디자이너가 대부분의 작업을 혼자 맡는 경우가 많다. (고군분투하고 계실 모든 프디분들 존경합니다!) 그렇다 해도 규모가 어떻든, 합의된 규칙과 프로세스만 제대로 마련된다면 충분히 일관된 결과물이 나온다고 믿는다.
현재 맡고 있는 서비스 역시 많은 양의 숫자와 텍스트가 노출되는 ‘주식 서비스’이다. 이번 글에서 다룰 예시는 주식 서비스를 중심으로 하겠지만, 여기서 전하는 기준이나 고려 사항이 절대적인 답은 아니다. 모든 결정은 조직의 상황에 따라 협의와 조정을 거쳐야 한다는 점을 강조하고 싶다.
1. 소수점 표기, 어디까지 보여줘야 할까?
일반적으로 소수점은 최대 둘째 자리까지 표현하는 것 같다. 참고로 재직 중인 회사에서는 소수점을 둘째 자리까지 표현하는 것을 기본 원칙으로 하고 있다. 서비스 내 모든 숫자 표기는 해당 규칙을 따르고 있으며, 이는 사용자 경험을 통일성 있게 유지하는 데 중요한 역할을 한다.
다른 서비스에서도 각자의 방식으로 소수점 표기 기준을 잡고 있다. 예를 들어 토스와 미래에셋은 예시 이미지와 같이 표기한다. 소수점 몇 자리까지 보여줄 것인가의 문제는 일관성과 가장 연관이 있으므로 팀 내에서 프로덕트에 맞는 최적의 기준을 정하면 된다.
2. 테이블 정렬, 어떻게 하면 보기 쉬울까?
서비스를 운영하다 보면 수많은 테이블과 마주하게 된다. 수익률, 체결 내역, 거래원, 투자자 등 텍스트로 표현되는 데이터가 방대하기 때문에, 이를 깔끔하게 정리하는 것이 중요하다. 테이블이 복잡해질수록 정렬 방식이 일관되지 않으면 가독성이 떨어지고, 사용자 경험에도 부정적인 영향을 미칠 수 있다.
테이블 정렬 예시 화면숫자는 우측 정렬, 종목명은 좌측 정렬하는 것이 가장 일반적이다. 숫자가 오른쪽부터 일정한 기준으로 정렬되면 사용자가 값을 빠르게 비교할 수 있다. 반면, 종목명은 글자 수가 다 다르기 때문에, 왼쪽으로 정렬하면 한눈에 보기가 더 편하다. 이렇게 익숙한 패턴을 따르는 것이 사용자의 인지 부하를 줄이는 데도 도움이 된다.
또한, 테이블을 구성할 때는 상단 타이틀 텍스트의 가독성을 높이는 것도 중요하다. 타이틀 텍스트는 데이터를 그룹화하는 역할을 하기 때문에, 볼드 처리하여 강조하는 것이 시각적 구분을 돕는다. 만약 타이틀과 본문 텍스트의 크기가 동일하다면, 볼드 처리만으로도 정보의 위계를 명확하게 만들 수 있다.
3. 테이블 내 종목명이 길어지는 경우, 어떻게 처리해야 할까?
예시로 "KODEX 200선물인버스2X" 같은 ETF나 기업의 긴 종목명은 테이블의 균형을 깨뜨릴 수 있다. 이럴 때, 보통 두 가지 방법이 사용된다.
폰트 크기 줄이기 / 두 줄 표기 / 줄임 처리 방식의 예시들폰트 크기를 줄이는 방법이다. 일부 서비스에서는 테이블 내 글자가 길어질 경우 글자 크기를 작게 조정해 한 줄에 맞추기도 한다.
두 줄 표기 또는 줄임 처리(…) 방식이다. 두 방식을 동시에 적용할 수도 있다. 본인은 폰트 크기의 일관성을 유지하는 것을 최우선 기준으로 삼았기 때문에, 종목명이 길어질 경우에는 폰트 크기를 그대로 유지하고 줄임 표기로 표현하는 방식을 선택했다.
결국, 어떤 방식을 선택하든 중요한 것은 서비스의 스타일과 사용자 경험을 고려한 일관된 기준을 유지하는 것이다.
4. 숫자가 미묘하게 신경 쓰인다면? (feat.프론트)
숫자만 쳐다보다 보면 "뭔가 이상한데?"라는 느낌이 들 때가 있다. 이런 작은 차이가 쌓이면, 테이블이 어수선해 보이거나 숫자가 들쭉날쭉하게 느껴질 수도 있다. 이럴 때 해결책 중 하나가 FontFreeze tnum 적용이다. 이는 숫자의 글꼴 변형을 막아 일정한 간격과 형태를 유지하도록 도와준다. 특히 금융 데이터처럼 숫자를 빠르게 스캔해야 하는 환경에서는 가독성을 높이는 데 큰 도움이 된다.
가끔 개발 측에서 알아서 적용해 주는 경우도 있지만, 서비스가 아직 구축 단계라면 직접 이야기해 보는 것이 좋다. 본인 역시 숫자가 미묘하게 신경 쓰였고, 다행히 프론트 쪽에서도 같은 문제를 인식하고 있어서 적용하게 되었다. 이런 부분은 서비스가 어느 정도 자리 잡은 후에는 수정이 어려울 수도 있으니, 초반부터 맞춰 나가는 것이 좋다.
FontFreeze tnum 적용에 따른 차이결론적으로, 숫자가 어색하게 보인다면 그냥 넘기지 말고 개발팀과 함께 고민해 보자. 작은 차이가 쌓여 더 정돈된 화면을 만들고, 사용자 경험을 향상시킬 수 있다.
마치며
모든 서비스가 그렇듯, 뾰족한 정답은 없지만 해결할 수 없는 프로덕트 문제도 없다고 생각한다. 다만, 해결하는 과정에서 각 파트의 상호 존중과 이해는 필수적이다. 결국 우리가 고민해야 할 것은 사용자가 더 쉽게 보고, 더 편하게 사용할 수 있는 서비스를 만드는 것이다.
팀 내에서 꼭 챙겨야 할 우선순위를 미리 정하고 협의해 둔다면, 금융·핀테크 서비스가 주는 복잡함도 생각보다 즐겁게 풀어나갈 수 있다고 믿는다. 아주 미세한 팁일 수도 있지만, 혼자서 고군분투하는 프로덕트 디자이너들에게 조금이나마 도움이 되었길 바란다.
