채팅방 빠르게 전환하기
오랜만에 프레이머 연습
고민 거리가 하나 생겼다
업무용 단톡방이 차츰 생겨나면서, 서로 다른 프로젝트 멤버들과 동시에 대화를 하는 경우가 많아졌고, 그때마다 채팅 목록과 여러 채팅방 사이를 반복해서 오가는 경우가 빈번하게 일어났다.
발산과 구체화
채팅방 A 에서 채팅방 B 로 이동할 때에 곧바로 옮겨가는 것이 아니라, ‘채팅방 A → 채팅 목록 → 채팅방 B’의 3단계를 거치게 되는데, 채팅 목록으로 이동하는 중간과정을 생략할 수만 있다면 좀 더 빠른 이동이 가능할 것으로 생각했다.
이를 위해서는 채팅방에서 바로 채팅 목록을 확인하고 선택할 수 있어야 할 텐데, 안그래도 복잡한 채팅방에 또 다른 요소를 추가 하기는 불가능해 보였다. 햄버거 메뉴처럼 없던 공간을 창출해 낼 필요가 있었다.
‘아! 이전에 그런거 만든 적 있었는데?’
하지만, 화면을 아래로 쓸어내리기에 채팅창 자체가 이미 스크롤 뷰이고, 그렇다고 내비게이션 바만 내리기에는 어포던스가 너무 없었다. 약하긴 하지만 그나마 채팅방 제목 영역을 통해서 다른 채팅방 제목들을 훑어볼 수 있도록 하는 것이 더 나을 것 같았다.
제목이 길어질 수도 있기 때문에, 내비게이션 바에 표시되는 채팅방 제목을 대화상대의 프로필 사진으로 변경하고, 해당 사진을 ‘꾸욱’ 눌러서 대화 목록으로 이동하는 동선을 빠르게 구현해 보기로 했다.
오랜만에 열어보는 프레이머
최근에는 인터랙션을 구현하기보다 리서치와 기획, 설계 등의 업무를 자주 진행하게 되면서, 프레이머를 열어볼 기회가 흔치 않았다. 프레이머는 그 사이에 벌써 v116이 되었고, 지원하는 기능도 훨씬 많아져 있었다. 오랜만에 기능도 익힐 겸 연습 삼아 아이디어를 구현해 보기로 했다.
#1.
우선 준비된 이미지들을 디자인탭에 모두 쏟아 놓았다. 채팅방 이미지는 페이스북의 메신저킷을 사용했다.
반드시 프레임으로 묶어야 하는 것은 아니지만, (이렇게 하는게 깔끔해 보여서) 인터랙션이 필요한 요소들은 프레임으로 묶어 주었다. (단축키 F)
프레임은 미리 지정된 디바이스 크기로 추가할 수 있다. (아이폰8 기준 가로 375픽셀)
#2.
그라디언트 기능을 처음으로 써 보았다. 레이어를 선택하고, 오른쪽 작업 패널의 Fill에서 Liner를 선택하면 된다.
그러면 해당 레이어에 그라디언트 방향과 시작점, 끝점이 표시된다. 가이드라인을 드래그 하면서 방향을 지정하고, 시작과 끝점을 각각 클릭하여 색상과 투명도를 지정할 수 있다.
#3.
디자인 작업이 완료된 후, 왼쪽의 레이어 트리에서 인터랙션이 필요한 요소들을 타겟으로 지정한다. 원하는 프레임(혹은 레이어) 우측에 라디오 버튼을 클릭해서 지정하면 된다. 타겟으로 지정하고 나면 코드탭에서 해당 타겟명을 입력해 활용할 수 있다.
#4.
코드탭으로 이동. 채팅방 전환의 슬라이드 트랜지션을 위해서 플로우 컴포넌트를 하나 만들고, nav를 헤더로 추가한 후, 첫 화면으로 chatA를 지정했다.
#5.아이디어의 핵심인 미니 채팅 목록을 만들 차례. 미니 채팅 목록은 페이지 컴포넌트로 만들었다. 내비게이션 바에서 등장하므로, nav의 자녀로 추가하고, 프로필 이미지의 크기를 기준으로 적당히 길이와 높이를 정했다.
#6.
페이지 컴포넌트를 완성한 후, 미니 채팅 목록에 표시할 아이템들을 추가한다. 총 7개의 페이지에 각각 프로필 이미지를 중앙정렬하여 삽입했다. (배열과 반복문도 오랜만에 하려니까 낯설다;;;)
디자인탭에 나열했던 프로필 이미지들을 profiles 배열에 넣고, 반복문으로 생성한 페이지들의 자녀로 추가했다.
그리하여 만들어진 미니 채팅 목록. 각 페이지에 프로필 이미지가 예쁘게 들어가 있다. 그런데 이미지가 너무 정직하게 퐉.퐉.퐉. 들어간 느낌이다. 이럴 때 쓰라고 만든 그라디언트를 추가해 보기로 한다.
‘아. 훨씬 낫네!’
#7.
UI를 완성했으니, 이제 인터랙션을 추가해본다. 우선 현재 대화상대의 프로필 이미지가 표시되는 페이지를 제외한 나머지 페이지들을 모두 가리고, ‘꾸욱’ 누르면 나타나서 스크롤 할 수 있도록 했다.
‘꾸욱’ 누르는 인터랙션을 모든 페이지에 적용하기 위해서 LongPress는 반복문 안에 추가한다.
여기까지 하고 나면, 미니 채팅 목록이 이렇게 나타난다. ‘꾸~욱’
실제로는 페이지 컴포넌트(미니 채팅 목록)가 나타나는 것이 아니라, 가려져 있던 페이지(와 프로필 이미지)가 보이는 애니메이션이다.
#8.
‘꾸욱’ 누르는 인터랙션은 완성했고, 이번에는 ‘톡’ 누르는 인터랙션을 만들어 본다. 미니 채팅 목록이 나타난 후에 다른 대화상대의 프로필 이미지를 탭하면 어떻게 될까?
선택한 이미지가 가운데로 이동하고 미니 채팅 목록이 사라지는 동작을 표현하기 위해서, ‘톡’ 누르면 해당 페이지를 현재 페이지로 변경하고, 나머지 페이지가 사라지도록 했다.
마찬가지로 모든 페이지에 적용하기 위해 반복문 안에 Tap을 추가한다.
‘톡’ 해서 대화 상대 선택하기
#9.
대화 상대 선택 후에, 해당 대화 상대와의 채팅방으로 이동하는 동선은 처음에 만들었던 플로우 컴포넌트로 쉽게 해결할 수 있다. 디자인탭에서 준비했던 chatA, chatB에 맞는 프로필 이미지(의 페이지)에 showNext() 코드를 추가하면 된다.
#10.
이제 모든 과정이 끝났다. 떨리는 마음으로 전체 동선을 확인해보니…
잘 된다. 하지만…
짧은 동선이 능사는 아니다
어찌되었든 처음에 해결하려 했던, 채팅 목록으로 이동하는 중간 단계는 생략할 수 있게 되었다. 그런데 이어서 생기는 의문.
‘프로필 사진만으로 원하는 채팅방을 찾을 수 있을까?’
‘최근 메시지 내용, 참여자 수 등의 정보가 생략된 채팅 목록이 의미가 있을까?’
단계를 줄여 효율성을 확보할 수 있는 듯 보였으나, 원하는 채팅방을 정확히 인지하고 선택하기가 어려워, 결과적으로는 오류를 유발할 수 있는 비효율적인 방법이라는 생각이 들었다. 결국 더 디벨롭하지 않고 고이 간직하기로 한다.
빠르게 만들고 쉽게 버리는 것이 프로토타이핑의 매력이라지만, 그래도 열심히 생각하고, 공들여 만든 것을 버리는 순간은 늘 아쉽다. 역시 인터랙션은 재미있고 어렵다. 그 재미 덕분에 계속 붙잡고 있지만, 어려운 건 어쩔 수 없다.
나름대로 기발하다 생각했던 아이디어를 소개하려던 포스팅은 결국 또 한 번 프레이머 튜토리얼 글이 되었고…
fin.
