단타로만 메시지 보내는 사람이 직접 만들어본 UI
서비스별 비교부터 프로토타입 제작까지(feat. Cursor)
01. 단타?
가끔 메신저를 하다 보면 한 문장이 아니라 단타로 잘라서 글을 보낸 적이 있는가? (그것은 나)
단타 예시원해서 그런 건 아니고 급한 성격 그리고 생각과 손가락이 동시에 움직이기 때문인 것 같다.
가끔 프로그램에 익숙해지면 생각을 하고 단축키를 누르는 게 아니라 어떤 생각과 동시에 손도 동작하는 그런… 그만큼 채팅이라는 것이 오래되고 익숙해진 탓도 있는 것 같다.
(이렇게 보내는 것이 좋지 않아 보일 때가 많기 때문에 고치고 싶긴 한데 습관이라는 것을 고치는 게 어렵다.)
키보드를 활용해서 타이핑하는 것보다 모바일에서 타이핑하는 게 어렵기 때문에 끝까지 완성하지 못한 채 짧게 보내는 것도 한몫하는 것 같다.
문득 이게 나뿐인가? 그리고 단타를 위한 채팅 경험은 없을까라는 궁금증이 생겼다.
또 그렇게 생각하고 나니 이런저런 아이디어이 생각났다.
02. 스터디&리서치
뭐든 역사부터 디깅
현재의 말풍선 채팅 UI 버블 형태의 채팅이 대중화된 것은 2007년 Apple의 SMS App의 등장이라고 한다.
나도 기억에 문자에서 벗어난 기억은 있었는데 그것도 버디버디 같은 형식의 채팅이었던 것 같다.
채팅앱 간단 비교
메시지 서비스별로 짧게 보냈을 때의 화면. 화면들만 보고도 어떤 앱인지 맞출 수 있다.IG, iMessage, Line, KakaoTalk, TikTok을 중심으로 비교했다. (선정에 큰 이유는 없고 폰에 깔려 있고, 계정이 연동되어서 귀찮지 않은…).
짧고 빠른 단타 메시지를 보내보며 화면을 캡처하고 나니 흥미로운 점이 있었다.
화면만 봐도 어떤 앱인지 단번에 구분할 수 있을 만큼 고유한 아이덴티티가 있다는 것.
예를 들면
말꼬리는 앱마다 완전히 다르게 생겼다.
Line과 KakaoTalk은 말꼬리가 ‘위’에 붙어 있는 반면,
그 외 앱들은 대부분 ‘아래’에 붙어 있다. iMessage는 이런 말꼬리 옆의 여백을 활용해 시간·읽음 표시까지 욱여넣는다. 공간 활용 면에서는 효율적이고 보기에도 자연스럽다.
인스타는 말꼬리 방향 조절을 통해 일종의 그룹핑 효과를 주고 있음(긍정적) → 어쩌면 이것 때문에 내가 미묘하게 IG를 많이 쓰고 쾌적하다고 느낄지도 모르겠다.
글자와 버블의 여백이 주는 인상이 중요하다고 생각해서 체크해 보았다.말풍선과 글자의 여백도 러프하게 비교해 봤는데 이 경우는 의외로 서비스별로 거의 큰 차이 없이 비슷한(거의 동일한) 여백을 갖고 있었다.
그 외에도 또 하나 재미있었던 점은, 카카오와 라인이 사용하는 은은한 하늘색 계열의 기본 배경 톤이 어쩌면
iMessage의 영향일 수도 있겠다는 생각.
03. 디자인
스터디에 이어서 아이디어를 엮어서 짧게 단타로 보내면 그 메시지 글을 하나로 묶어서 만들어버리는 디자인을 테스트해 보았다. 묶는 방식, 간격 등 여러 테스트를 진행해 보고 이를 웹으로 프로토타이핑해 보는 것을 목표로 했다. 특히 이런 아이디어는 프로토타이핑을 하는 것과 안 하는 것의 설득력이 다르다고 생각했다.
여러 방법들이 있겠지만 type E로 결정그래서 여러 아이디어를 스케치해 보며,
연속으로 짧게 보내는 메시지를 하나의 흐름처럼 묶는 방식을 테스트하기 시작했다.
단타 메시지가 가진 툭툭 끊기는 느낌을 시각적으로 자연스럽게 만드는 방법이라고 생각했다.
서로 다른 색상이 붙어서 자연스러워진다면 콘셉트가 더 효과적일 것 같다.
취소, 답장하기 등 특정 메시지 롱프레스시에도 위트 있고 재미있는 아이디어가 많이 생각났다.
최종 디자인 1
최종 디자인 2최종적으로는 위의 두 이미지처럼 디자인하였다. 실제 메시지 앱보다 전체적으로 스케일을 좀 더 큰 느낌을 줘서 장문의 메시지 앱이 아니라 짧고 단타 위주의 메시지 앱처럼 느껴지면서 가벼운 느낌을 주고 싶었기 때문이다.
사실 실험이다 보니 완성도를 너무 집착하면 끝없이 수정하게 될 것 같아서, 어느 정도 선에서 마무리했다.
특히 구현이 어려운 것은 보내기 메시지처럼 몰핑 된 느낌, 그리고 합쳐질 때 치즈처럼 달라붙는 중간 과정들,
그리고 원래 원한 건 붙은 메시지를 잡아당기거나 롱프레스하면 보내기 취소, 답장하기 등의 옵션을 제공하기 위해 떨어지면서 파생되는 버튼들도 구현하고 싶었는데, 더 건들면 또 올리지 못하고 사라지게 될 것 같아서 마무리했다.
만들면서 쫀득함도 쫀득함인데, 합쳐지면서 살짝 플래시 효과를 적용해 봤더니 타격감(?)이라고 해야 할까, 게임에서 보는 이펙트 느낌이 나면서 뭔가 경쾌하게 느껴졌다. 이런 효과들을 통해서 또 재미있는 디자인을 해볼 수 있겠다 생각했다.
Cursor AI를 사용해서 만들었다. AI란 정말 위대하다...
데스크톱으로 보는 것을 추천간단한 설명
- 상단 프로필 영역 클릭하면 메시지를 받을 수 있음.
- input 영역에 글을 써서 보내면 채팅이 보내진다.
- 1초 안에 연속으로 보내는 메시지는 하나로 묶인다.
아래 링크에서 확인 가능하다. (모바일에서도 최소한으로 볼 수 있게 해 두긴 했는데, 웹이 더 낫다)
https://makemade93.github.io/metaball-chat/