문자메시지 스크롤 시 기능버튼 인터랙션 디자인하기

문자메시지 스크롤 시 기능버튼 인터랙션 디자인하기

케이스   |   힌트   |   솔루션·피드백

문제

스마트폰에서 문자메시지 확인화면 스크롤 시 기능버튼이 함께 스크롤되어 화면에서 사라지는 인터랙션 문제를 해결해봅시다.


아래 그림은 갤럭시 S22 스마트폰에서 문자메시지를 확인하는 장면입니다. 

문자 내용을 보기 위해 아래로 스크롤을 하면 화면 상단에 있던 버튼들이 사라집니다. 이를 다시 보기 위해선 최상단으로 다시 스크롤을 하던지, 상단에 있는 전화번호 부분을 탭 해야 하는 불편함이 있습니다.
그렇다고 버튼들을 고정 영역으로 두기엔 메시지 확인을 위한 공간이 작아집니다.


이 문제를 동시에 해결할 수 있는 적절한 인터랙션 안을 만들어보세요.

케이스 풀이시 고려사항

  • 우리가 흔히 사용하는 스마트폰 속에서도 생각보다 많은 인터랙션 디자인 문제들이 존재함을 인지할 수 있고, 그 문제점을 알아보는 날카로운 눈을 가지도록 노력해야 하며, 불편함 해결에 다양한 인터랙션 디자인 안을 고민하는 것이 필요함을 알게 될 겁니다.
  • 내비게이션은 차량의 속도에 따라 자동으로 지도를 확대하거나 축소합니다. 이를 응용해보세요. 

문제

스마트폰에서 문자메시지 확인화면 스크롤 시 기능버튼이 함께 스크롤되어 화면에서 사라지는 인터랙션 문제를 해결해봅시다.


아래 그림은 갤럭시 S22 스마트폰에서 문자메시지를 확인하는 장면입니다.
문자 내용을 보기 위해 아래로 스크롤을 하면 화면 상단에 있던 버튼들이 사라집니다. 이를 다시 보기 위해선 최상단으로 다시 스크롤을 하던지, 상단에 있는 전화번호 부분을 탭 해야 하는 불편함이 있습니다.
그렇다고 버튼들을 고정 영역으로 두기엔 메시지 확인을 위한 공간이 작아집니다.


이 문제를 동시에 해결할 수 있는 적절한 인터랙션 안을 만들어보세요. 

케이스 풀이시 고려사항

우리가 흔히 사용하는 스마트폰 속에서도 생각보다 많은 인터랙션 디자인 문제들이 존재함을 인지할 수 있고, 그 문제점을 알아보는 날카로운 눈을 가지도록 노력해야 하며, 불편함 해결에 다양한 인터랙션 디자인 안을 고민하는 것이 필요함을 알게 될 겁니다.


내비게이션은 차량의 속도에 따라 자동으로 지도를 확대하거나 축소합니다. 이를 응용해보세요. 


케이스 힌트

이 케이스가 어떤 케이스인지,

어떻게 접근해야 하는지 알 수 있어요.

케이스를 풀기 위한 접근법


  • 이 케이스는 마이크로 인터랙션을 다룹니다. 휴대폰 제조회사(예. 삼성전자)나 UX가 고도화된 서비스(예. 쿠팡, 토스)에서는 세세한 화면의 움직임까지 신경을 쓰고 있습니다.

  • 할 수 있는 액션(스와이프 업, 다운, 빠르게 스와이프 업/다운 등)을 기술한 후에 화면의 움직임을 세세한 단계로 나누세요.
  • 각 단계에서 보여줘야 할 정보와 그렇지 않은 정보를 구분하세요.
  • 마이크로 인터랙션의 여러 사례들을 살펴보세요. 잘 만들어진 사례들이 많으며 좋은 영감을 받을 것입니다. 
    참고 - https://brunch.co.kr/@thinkaboutlove/230

  • 그리고 나서 피그마와 같은 툴을 사용해서 만들어보세요. 직접 만들어서 여러 번 사용해 보면서 계속 발전시키세요.
  • 정리는 디자인된 이유를 적고, 움직임이 보여지는 UX 프로토타입(파워포인트도 되고, 피그마도 지원)을 만드는 것이 좋습니다. 

이 케이스를 풀기 위한 접근법

이 케이스는 마이크로 인터랙션을 다룹니다. 휴대폰 제조회사(예. 삼성전자)나 UX가 고도화된 서비스(예. 쿠팡, 토스)에서는 세세한 화면의 움직임까지 신경을 쓰고 있습니다.

할 수 있는 액션(스와이프 업, 다운, 빠르게 스와이프 업/다운 등)을 기술한 후에 화면의 움직임을 세세한 단계로 나누세요.

 
각 단계에서 보여줘야 할 정보와 그렇지 않은 정보를 구분하세요.

 
마이크로 인터랙션의 여러 사례들을 살펴보세요. 잘 만들어진 사례들이 많으며 좋은 영감을 받을 것입니다. 참고 - 
https://brunch.co.kr/@thinkaboutlove/230

그리고 나서 피그마와 같은 툴을 사용해서 만들어보세요. 직접 만들어서 여러 번 사용해 보면서 계속 발전시키세요.

 
정리는 디자인된 이유를 적고, 움직임이 보여지는 UX 프로토타입(파워포인트도 되고, 피그마도 지원)을 만드는 것이 좋습니다. 


솔루션·피드백

다른 회원은 이 케이스를 어떻게 풀었는지,

어떤 피드백을 받았는지 볼 수 있어요.

이XX 회원님이 제출하신 솔루션 예시입니다.

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점

  • 케이스를 풀이하는 접근방식을 잘 잡으셨습니다. 이런 케이스는 사용자들에게 물어봐도 잘 모르기 때문에 디자이너가 더 좋은 안을 만들어서 보여줘야 비교가 가능해 집니다.
  • 사용자와 제품 사이에 어떤 인터랙션이 일어나는 지 세부적으로 잘 정의한 후 현재 UI안 보다 나은 대안을 고민해봐야 합니다. 그런 의미에서 사용자의 행동을 잘 분류하신 후 개선안을 설명하셨습니다. 개선안도 나쁘지는 않습니다. 

📌 부족한 점 

  • 메시지를 보여줄 공간을 넓힌다와 관련 버튼을 보여준다 두가지 목표가 충돌합니다. 이를 해결하기 위한 안은 여러개가 있을 수 있는데 이중 가장 소극적인 안을 채택하셨습니다.
  • 좀더 적극적인 방안으로는 버튼이 사라졌다가 나타나거나 특정 버튼만 사라지게 하는 방안들이 있습니다. 이런 경우 적용되는 것이 빈도분리의 원칙 (Frequency-separated principle)입니다. 사용자와 제품/시스템 혹은 환경 사이의 상호작용의 빈도에 따라 사용자에게 제공되는/요구하는 정보 혹은 피드백의 정도를 달리하여 설계에 반영하는 것입니다. 사례로 차량의 속도에 따라 지도의 확대/축소 비율을 자동 조절한다든지 휴대폰 리스트에서 Flicking 할 때 스크롤바가 나타나게 합니다.
  • 빈도 분리의 원칙을 이 케이스에 적용하면 빠르게 Flicking 하면서 버튼을 누를리 없으니 버튼은 사라져도 무방합니다. 느리게 Flicking해도 화면을 넓게 보면서 상단 버튼의 존재를 알 수 있으며, 멈추면 클릭할 수 있습니다. 실제 구현 시에는 Flicking 속도에 대한 정의가 필요하며, 적절한한 속도를 알아내기 위한 실험도 필요할 수 있습니다.

📘 총평 


이 케이스는 최근 중요하게 여겨지며 수준 높은 회사에서는 신경을 많이 쓰는 마이크로 인터랙션을 어디서 해야할지 기획하는 사례입니다. 사용자 요구사항이 충돌하는 것을 마이크로 인터랙션으로 해결하는 것이 중요한데 가장 보수적이며 안전한 안으로 기획하였습니다. 실무에서 이렇게 하느것이 나쁜 것은 아닙니다. 하지만 취업을 준비해야 하는 입장에서는 좀더 과감한 안을 만들고 이를 설명하는 것이 더 나은 전략입니다. 다른 케이스도 해보시면서 과감한 디자인안으로 본인의 자랑거리를 만드시기를 권유드립니다.

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점 
케이스를 풀이하는 접근방식을 잘 잡으셨습니다. 이런 케이스는 사용자들에게 물어봐도 잘 모르기 때문에 디자이너가 더 좋은 안을 만들어서 보여줘야 비교가 가능해 집니다.
 
사용자와 제품 사이에 어떤 인터랙션이 일어나는 지 세부적으로 잘 정의한 후 현재 UI안 보다 나은 대안을 고민해봐야 합니다. 그런 의미에서 사용자의 행동을 잘 분류하신 후 개선안을 설명하셨습니다. 개선안도 나쁘지는 않습니다. 
📌 부족한 점 
메시지를 보여줄 공간을 넓힌다와 관련 버튼을 보여준다 두가지 목표가 충돌합니다. 이를 해결하기 위한 안은 여러개가 있을 수 있는데 이중 가장 소극적인 안을 채택하셨습니다.
 
좀더 적극적인 방안으로는 버튼이 사라졌다가 나타나거나 특정 버튼만 사라지게 하는 방안들이 있습니다. 이런 경우 적용되는 것이 빈도분리의 원칙 (Frequency-separated principle)입니다. 사용자와 제품/시스템 혹은 환경 사이의 상호작용의 빈도에 따라 사용자에게 제공되는/요구하는 정보 혹은 피드백의 정도를 달리하여 설계에 반영하는 것입니다. 사례로 차량의 속도에 따라 지도의 확대/축소 비율을 자동 조절한다든지 휴대폰 리스트에서 Flicking 할 때 스크롤바가 나타나게 합니다.

빈도 분리의 원칙을 이 케이스에 적용하면 빠르게 Flicking 하면서 버튼을 누를리 없으니 버튼은 사라져도 무방합니다. 느리게 Flicking해도 화면을 넓게 보면서 상단 버튼의 존재를 알 수 있으며, 멈추면 클릭할 수 있습니다. 실제 구현 시에는 Flicking 속도에 대한 정의가 필요하며, 적절한한 속도를 알아내기 위한 실험도 필요할 수 있습니다. 
📘 총평 
이 케이스는 최근 중요하게 여겨지며 수준 높은 회사에서는 신경을 많이 쓰는 마이크로 인터랙션을 어디서 해야할지 기획하는 사례입니다. 사용자 요구사항이 충돌하는 것을 마이크로 인터랙션으로 해결하는 것이 중요한데 가장 보수적이며 안전한 안으로 기획하였습니다. 실무에서 이렇게 하느것이 나쁜 것은 아닙니다. 하지만 취업을 준비해야 하는 입장에서는 좀더 과감한 안을 만들고 이를 설명하는 것이 더 나은 전략입니다. 다른 케이스도 해보시면서 과감한 디자인안으로 본인의 자랑거리를 만드시기를 권유드립니다. 

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 역량 향상에 훨씬 도움이 됩니다.

일곱시로 실무 UX 역량을, 특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 

 역량 향상에 훨씬 도움이 됩니다.


일곱시로 실무 UX 역량을,

특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.