제품 디자인 및 UI/UX

인터랙션 디자인

모든 동작을 명확하게 만드세요: 사용자가 탭할 때의 피드백, 기다리는 동안의 진행 상황, 무언가 실패했을 때의 도움. 사용성과 접근성을 위해 설계된 인터랙션과 모션.

프로젝트 논의하기인터랙션에 대해 논의하기

인터랙션 작업을 의뢰하는 분들

화면은 완성된 것처럼 보이지만 각 컨트롤이 어떻게 반응하는지는 그것을 만든 사람에게 맡겨졌기에, 중복 제출, 소리 없는 저장 및 막다른 오류가 사용자에게 전달됩니다. 인터랙션 디자인은 더 많은 것이 만들어지기 전에 그 동작을 한 번에 결정합니다.

  • 기존 앱에 스와이프, 드래그 또는 오프라인 동작을 추가하는 모바일 팀
  • 장시간 실행되는 가져오기, 내보내기 또는 리포트 작업이 있는 SaaS 팀
  • 반복된 동작이 비용을 발생시키는 결제, 예약 또는 체크아웃 흐름을 운영하는 팀

무슨 일이 일어나고 있는지 사용자에게 알려주는 인터랙션

사용자는 제품이 어떻게 반응하는지로 제품을 판단합니다: 버튼이 탭을 확인해 주는지, 긴 작업이 진행 상황을 보여주는지, 실패한 결제가 다음에 무엇을 해야 하는지 설명해 주는지. 인터랙션 디자인은 그러한 순간들을 다룹니다. 저희는 마이크로 인터랙션, 전환, 제스처 및 모든 인터페이스 상태를 설계하고, 사용자가 이해하는 데 도움이 되는 곳에만 모션을 사용합니다. 모든 것은 프로토타입으로 제작되고, 접근성과 성능이 점검되며, 개발자가 구현할 수 있도록 명세화됩니다. 단독 작업으로든 디자인 및 구축 프로젝트 내에서든 가능합니다.

AI 지원 프로토타이핑, 디자이너가 판단하는 모션

AI가 돕는 방식

  • 각 컴포넌트와 화면에 대한 상태 목록을 구축하여 비어 있음, 로딩, 오류 또는 성공 상태를 놓치지 않도록 합니다.
  • 프로토타입에서 모션과 인터랙션 변형을 생성하여 타이밍과 동작을 실제 사용 환경에서 비교합니다.
  • CSS 또는 Framer Motion으로 프로토타입 코드를 작성하여 인터랙션을 실제 브라우저에서 일찍 시도해 볼 수 있도록 합니다.
  • 승인된 프로토타입을 바탕으로 디자이너가 검토할 모션 명세와 구현 노트를 작성합니다.

전문가가 책임지는 부분

  • 모션이 어디서 도움이 되고 어디서 방해가 되는지는 디자이너가 결정합니다. 모든 애니메이션에는 목적이 필요합니다.
  • 디자이너는 디자인 캔버스에서만이 아니라 실제 기기에서 타이밍, 이징 및 느낌을 판단합니다.
  • 디자이너가 접근성을 책임집니다: 모션 감소 대안, 포커스 처리, 그리고 모션만으로 의미가 전달되지 않도록 하는 것.
  • 디자이너와 엔지니어가 함께 성능 한계를 설정하고 사용자가 실제로 사용하는 기기에서 테스트합니다.

폼의 상태, 유휴에서 복구까지

제출 버튼이 있는 폼에 대한 예시 상태 맵으로, 각 핵심 컴포넌트는 자체적인 맵을 갖습니다.

  1. 유휴

    필드는 눈에 보이는 레이블과 힌트 텍스트를 표시하며, 사용자가 동작하기 전까지는 아무것도 애니메이션되지 않습니다.

  2. 호버 및 포커스

    포인터를 위한 호버 신호와 키보드 사용자를 위한 눈에 보이는 포커스 링을 제공하며, 결코 색상만으로 표현하지 않습니다.

  3. 입력 및 유효성 검사

    오류는 사용자가 필드를 떠나면 나타나며, 그 옆에 문제를 말로 설명합니다.

  4. 로딩

    제출 시 버튼은 진행률을 표시하고 반복된 누름을 무시하며, 대기 시간이 길어지면 상태 메시지를 추가합니다.

    체크포인트: 디자이너가 대상 기기에서 타이밍을 판단합니다

  5. 성공 또는 오류

    성공은 무엇이 변경되었는지 확인해 주며, 제출 실패는 그 이유를 설명하고 사용자가 입력한 모든 내용을 유지합니다.

  6. 복구

    포커스가 메시지로 이동하고, 스크린 리더가 이를 안내하며, 사용자는 다시 시도하거나 편집할 수 있습니다.

    체크포인트: 디자이너가 확인한 스크린 리더 출력

문제가 발생했을 때: 제출 도중 연결이 끊기면, 폼은 합의된 경우 로컬 초안을 유지하고 이를 알리며, 사용자가 선택할 때만 다시 제출합니다.

인터랙션을 설계하는 방식

  1. 01

    감사

    현재의 흐름과 컴포넌트에서 누락된 상태, 불명확한 피드백 및 사용자를 산만하게 하거나 느리게 만드는 모션을 검토합니다.

  2. 02

    디자인 및 프로토타입

    각 인터랙션과 그 상태를 정의한 다음, AI의 지원을 받아 다양한 변형을 프로토타입으로 만들고 실제 기기에서 테스트합니다.

  3. 03

    사양 정의

    각 인터랙션에 대한 접근성 및 성능 요구 사항과 함께 모션 가이드라인, 토큰 및 구현 노트를 작성합니다.

  4. 04

    빌드 및 검증

    당사 엔지니어 또는 귀사 엔지니어가 인터랙션을 구현하며, 당사는 대상 기기에서 모션 감소를 켜고 끈 상태로 QA와 함께 빌드를 검토합니다.

AI 도구와 함께 작업하는 두 가지 방법

AI는 허용된 리서치를 종합하고 디자인을 탐색하도록 돕습니다. 리서치와 파일을 어디에서 처리할 수 있는지 선택하세요.

확실하지 않으신가요? 범위 지정 중에 저희가 하나를 추천하겠습니다. AI 딜리버리 옵션 비교하기

받게 되는 것

인터랙션 디자인 산출물

  • 상호작용 상태

    각 핵심 컴포넌트와 화면에 대해 설계된 빈 상태, 로딩, 오류, 성공, 비활성화 및 오프라인 상태로, 사용자가 보는 문구를 포함합니다.

  • 마이크로 인터랙션

    버튼, 토글, 폼 유효성 검사, 저장 및 알림에 대한 피드백으로, 사용자가 자신의 동작이 제대로 작동했음을 알 수 있도록 합니다.

  • 전환 및 내비게이션

    여러 단계로 이루어진 흐름에서 사용자의 속도를 늦추지 않으면서도 방향 감각을 유지시켜 주는 화면 및 페이지 전환입니다.

  • 제스처 디자인

    모바일을 위한 스와이프, 드래그, 길게 누르기 및 당겨서 새로고침 동작으로, 제스처를 사용할 수 없는 사용자를 위한 눈에 보이는 대안을 제공합니다.

  • 모션 가이드라인

    한 번 문서화된 지속 시간, 이징, 연출 및 모션 토큰으로, 모든 팀이 동일한 방식으로 애니메이션을 구현할 수 있도록 합니다.

  • 프로토타입 및 구현

    인터랙티브 프로토타입과 더불어 Lottie 파일, CSS 또는 Framer Motion 코드로, 범위에 포함되거나 지정된 경우 당사 엔지니어가 귀사를 위해 제작합니다.

일반적인 인터랙션 디자인 요청

고객 사례 연구가 아니라, 저희가 범위를 정하는 일반적인 시나리오입니다.

  • 피드백이 없는 Pay 버튼

    고객은 버튼이 작동 중이라는 어떤 표시도 보이지 않기 때문에 Pay를 다시 누릅니다. 당사는 눌림, 처리 중 및 확인됨 상태를 설계하고, 요청이 실행되는 동안 반복 탭을 차단하며, 시간 초과 시 사용자가 보게 될 내용을 명시합니다.

  • 스피너 뒤의 긴 가져오기

    사용자는 대용량 데이터 가져오기를 시작하고 스피너만 보다가, 다시 로드하고 처음부터 다시 시작합니다. 당사는 눈에 보이는 진행률, 나갔다가 다시 돌아올 수 있는 방법, 그리고 수정이 필요한 행에 대한 요약을 설계합니다.

  • 모바일 목록의 스와이프 동작

    한 모바일 앱이 작업 목록에 스와이프로 보관하기와 드래그로 순서 바꾸기를 원합니다. 당사는 실제 휴대폰에서 두 가지를 모두 프로토타입으로 만들고, 실수로 한 스와이프에 대한 실행 취소를 설계하며, 모든 제스처에 대한 메뉴 옵션을 유지합니다.

인터랙션 디자인이 다루지 않는 것

  • 레이아웃 그리드, 색상 및 타입과 같은 시각 언어는 Figma 및 비주얼 디자인 또는 귀사의 기존 UI에서 나오며, 당사는 화면이 어떻게 반응하고 변하는지를 설계합니다.
  • 일부 인터랙션은 긴 작업에 대한 진행률 업데이트나 결제에 대한 안전한 재시도처럼 백엔드 지원이 필요하며, 그 엔지니어링은 별도로 범위가 책정됩니다.
  • 여러 제품에서 공유되는 컴포넌트 라이브러리와 토큰은 디자인 시스템 작업이며, 당사의 모션 토큰과 상태 사양은 그것에 반영될 수 있습니다.
  • 설명 동영상, 애니메이션 광고 및 마케팅 일러스트레이션은 포함되지 않으며, 여기서의 모션은 제품의 컨트롤과 흐름을 위한 것입니다.

인터랙션이 빌드, QA 및 운영과 어떻게 연결되는가

  • 개발자가 바로 구현할 수 있는 사양

    프로토타입은 정확한 동작을 보여주고 모션 토큰은 지속 시간과 이징을 정의하므로, 엔지니어는 추측이 아니라 합의된 인터랙션을 구현합니다.

  • QA가 확인하는 상태

    QA는 빌드에서 로딩, 오류 및 빈 상태를 키보드 사용, 포커스 순서 및 모션 감소 동작과 함께 검증합니다.

  • 실제 장애를 고려한 설계

    시간 초과, 연결 끊김 및 거부된 동작은 엔지니어링과 함께 설계되므로, 운영 환경의 문제가 명확하고 복구 가능한 메시지로 사용자에게 전달됩니다.

  • 출시 후 개선

    분석 데이터, 지원 피드백 및 세션 리뷰를 통해 인터랙션이 사용자를 혼란스럽게 하거나 느리게 만드는 지점을 파악하고, 이후 릴리스에서 이를 개선합니다.

FAQ

자주 묻는 질문

애니메이션이 앱 속도를 느리게 만들까요?

성능을 염두에 두고 설계되었다면 그렇지 않습니다. 당사는 transform과 opacity처럼 브라우저가 효율적으로 처리하는 속성에 애니메이션을 적용하고, 긴 목록에 무거운 효과를 주는 것을 피하며, 사용자가 보유한 저사양 기기에서 테스트합니다. 애니메이션이 반응성을 저해하면 단순화하거나 제거합니다.

사용자가 애니메이션을 끌 수 있나요?

네. 당사는 사용자의 운영 체제나 브라우저의 모션 감소 설정을 존중하여 움직임을 단순한 페이드나 즉각적인 변경으로 대체하며, 필수 정보가 애니메이션에만 의존하지 않도록 합니다.

인터랙션을 구현하나요, 아니면 설계만 하나요?

둘 다 가능합니다. 단독 디자인 작업은 귀사 개발자를 위한 프로토타입, 모션 사양 및 구현 노트를 제공하며, 개발 및 호스팅은 포함되지 않습니다. 당사가 구현하기를 원하시면, 당사 엔지니어가 개발 범위의 일부로 인터랙션을 구현하고 당사 디자이너가 결과를 검토합니다.

어떤 애니메이션 도구를 사용하나요?

프로토타이핑에는 Figma와 ProtoPie를, 복잡한 애니메이션에는 Lottie와 함께 After Effects를, 웹 빌드에는 CSS 또는 Framer Motion을 사용합니다. 네이티브 모바일 프로젝트는 각 플랫폼 고유의 애니메이션 도구를 사용합니다. AI 어시스턴트가 변형과 프로토타입 코드를 만드는 데 도움을 주며, 디자이너와 엔지니어가 이를 검토합니다.

사용자가 이해하는 인터랙션 설계

어떤 흐름이 불명확하거나 미완성으로 느껴지는지 알려 주세요. 인터랙션 디자인이 어디에 가장 도움이 되는지, 그리고 그것이 어떻게 귀사의 빌드에 반영되는지 제안해 드리겠습니다.

프로젝트 논의하기인터랙션 디자인 논의하기