제목: Red, White, and Blue

모두가 알아야하는 칼라 팔렛트의 8가지 규칙

사람과 컴퓨터간의 인터렉션은 그래픽적인 UI 요소를 기반으로하며, 여기서 칼라는 중요한 역할을 한다. Pierre Bonnard가 이렇게 말했다.
칼라는 디자인에 기쁨의 퀄리티를 더해주는게 아니라 그것을 강조하는 것이다.
새로운 제품을 디자인할때 무한개 종류의 칼라 조합이 나올 수 있으므로,  칼라 스킴의 칼라를 정하는 일은 보통 어렵다. 이 글에선 올바른 칼라 팔렛트를 선택할 수 있도록 8가지 기본 규칙을 다룰 것이다.

1. 칼라의 수를 제한하기
디자인 제품에 칼라를 적용하는 것은 균형과함께 많이 해보아야한다. 많은 칼라를 사용할수록 균형을 맞추기 힘들어진다. 여러분의 칼라 스킴에 최대 3개의 주요 칼라를 담아둔다면, 더 나은 결과물이 나올 것이다. 사람들이 어떻게 Adobe Color CC를 사용하는지 연구한 Toronto대학의 연구에 따르면, 많은 사람들이 두세개의 칼라로 조합한 간단한 칼라 조합을 선호한다고 말했다.

여러분의 팔렛트에 정해놓은 것들을 너머 추가적인 칼라가 필요하게되면, 셰이드(shade)와 틴트(tint)를 이용할 수 있다.

스킴은 어떻게 만들까
그래서 이 두세가지의 칼라는 어떻게 정할까? 칼라 휠(color wheel)이 도와줄 것이다.

이 12가지 칼라 휠은 칼라 스킴을 만드는데 중요한 도구이다이 12가지 칼라 휠은 칼라 스킴을 만드는데 중요한 도구이다


새로운 칼라 스킴을 만들기 쉽게, 미리 정의해둔 칼라 스킴 기준들이 있다(특히 초보자를 위한).
  • Monochromatic: Monochromatic 스킴은 같은 칼라에서 나오지만, 틴트, 셰이드, 톤으로 조정하기 때문에 스킴을 만들기 가장 쉬운 기준이다. Monochromatic 칼라들은 함께 잘 어울려 부드러운 효과를 만든다.

Monochromatic 스킴은 눈에 굉장히 들어오기 쉽다(특히 blue나 green hues). 페이스북 예시에서도 볼 수 있듯, 이 스킴은 깔끔하고 우아해 보인다Monochromatic 스킴은 눈에 굉장히 들어오기 쉽다(특히 blue나 green hues). 페이스북 예시에서도 볼 수 있듯, 이 스킴은 깔끔하고 우아해 보인다

  • Analogous: Analogous 칼라 스킴은 연관된 칼라들로부터 만들어진다. 한 칼라는 주요 칼라로 사용되고, 다른 칼라들은 스킴을 풍성하게 하는데 사용된다. 이것은 상대적으로 뽑아내기 쉽지만, 전체적인 스킴이 이것에의해 과장될 수 있으므로, 여러분이 사용하는 칼라의 vibrancy를 잘 정하는것이 요령이다. 예를들어 제스처-주도 Todo앱인 Clear는 현재 작업들의 우선순위를 시각화하기위해 강한 인상(striking)의 analogous 칼라를 사용한다. 반면 명상 앱인 Calm는 사용자에게 편안함과 평화로움을 느끼게 하기위해 blue와 green의 analogous 칼라를 사용한다.

    12색 칼라 휠에 서로 인접한 세가지 칼라를 사용하여 analogous 스킴을 만들었다. 제스처기반 to-do 앱인 Clear는 현재 테스크들의 우선순위를 표현하기위해 강렬하고 눈에띄는 analogous 칼라를 사용한다12색 칼라 휠에 서로 인접한 세가지 칼라를 사용하여 analogous 스킴을 만들었다. 제스처기반 to-do 앱인 Clear는 현재 테스크들의 우선순위를 표현하기위해 강렬하고 눈에띄는 analogous 칼라를 사용한다


    Calm은 전반적인 분위기를 만들기위해 analogous 칼라들을 사용한다Calm은 전반적인 분위기를 만들기위해 analogous 칼라들을 사용한다

  • Complementary: 그것들의 기본 양식에서 이 스킴들은 두가지 강하게 반대되는 칼라로만 이루어진다. 이 스킴은 보는이의 시선을 끄는데 사용된다. complementary 스킴을 사용할때는, 주 칼라를 정하는 것이 중요하고, 강조를 위한 보색을 사용한다. 예를들어, 인간의 눈이 다른 종류의 green으로 가득찬 물체를 보고 있을때, 약간의 red는 굉장히 눈에 띌 것이다.

보색은 어떤것을 눈에 띄게 하기 가장 쉬운 방법이다보색은 어떤것을 눈에 띄게 하기 가장 쉬운 방법이다

  • Custom: 커스텀 칼라 스킴을 만드는 것은 많이들 생각하는것 만큼 복잡하지 않다. 훌륭한 칼라 팔렛트를 만들기위해 적용시킬 수 있는 간단한 요령이 있다. 중립적인 팔렛트(전통적인 monochromatic 스킴)에 밝은 강조의 칼라를 넣으면 된다. 새로 만들어진 스킴은 시각적으로 굉장히 강한 인상이 있을 것이다.

회색톤의 디자인에 한 칼라를 넣으면 간단하고 효과적으로 눈을 끈다. 드롭박스의 칼라 스킴에서, white와 grey의 조합으로 만든 레이아웃은 blue로 강조되어 튀어보인다회색톤의 디자인에 한 칼라를 넣으면 간단하고 효과적으로 눈을 끈다. 드롭박스의 칼라 스킴에서, white와 grey의 조합으로 만든 레이아웃은 blue로 강조되어 튀어보인다


2. 자연에서 영감을 받기
최고의 색 조합은 자연에서 온다. 왜냐? 이 스킴들이 눈에 자연스럽게 보이기 때문이다. 영감을 받기 위해, 우리는 주변만 둘러보면 된다. 여러분의 하루 삶에서 특히 아름답거나 강한 인상의 칼라를 본다면 그것으로 스킴을 만들려고 해보아라. 간단하게 아름다운 순간을 사진으로 찍고 이것으로 칼라 스킴을 만들어보자.

최고의 칼라 조합은 자연에서 온다. 사진 한장에서 칼라 스킴을 만들 수 있다최고의 칼라 조합은 자연에서 온다. 사진 한장에서 칼라 스킴을 만들 수 있다


3. 603010 규칙을 따르려 하자
이 규칙은 오랫동안 사용해온 데코레이팅 규칙이다. 이것은 칼라스킴을 함께하기 쉽게 도와준다. 60% + 30% + 10% 비율은 어떤 공간에서 사용되는 칼라의 벨런스를 말한다.

이 개념은 사용하기 아주 쉽다. 60%는 주 색조, 30%는 두번째 칼라, 10%는 강조하는 칼라로 이루어진다. 이 생각은 두번째 칼라가 메인 칼라를 지지하지만, 서로 충분히 다른 부분에 놓는다. 10%는 여러분의 강조하고자하는 칼라이다. CTA나 다른 주목하고 싶은 요소에 이 칼라를 놓을 수 있다.

60%는 주 색조, 30%는 두번째 칼라, 10%는 강조하는 칼라로 이루어진다. 이 기술은 눈을 하나의 초점에서 다른 곳으로 편안하게 이동시킬 수 있게 한다60%는 주 색조, 30%는 두번째 칼라, 10%는 강조하는 칼라로 이루어진다. 이 기술은 눈을 하나의 초점에서 다른 곳으로 편안하게 이동시킬 수 있게 한다


4. 그레이스케일 먼저 디자인하기
칼라를 가지고 노는것은 즐겁다. 이것이 왜 새로운 제품의 작업을 할 때 칼라 스킴 고르기를 가장 먼저 하는 이유이기도 하다. 이것은 매우 칼라 스킴으로 유혹되는데, 나는 여러분이 그레이스케일 디자인을 먼저 해보도록 하기를 추천한다. 그레이스케일 그라디언트로 여러분의 앱 프로토타입을 먼저 만들고 이것을 기본선으로 사용하자. 칼라를 넣기 전에 그레이스케일로 디자인 하면 여러분을 요소들의 공간과 레이아웃에 집중시킬 수 있다.

칼라를 나중에 넣고, 그 목적으로만 작업하자.

그레이스케일 레이아웃에 한 칼라를 넣으면 간단하고 효과적으로 이목을 끈다그레이스케일 레이아웃에 한 칼라를 넣으면 간단하고 효과적으로 이목을 끈다


5. 칼라 Black 사용을 피하기
현실 세계에선, 순수한 black은 거의 존재하지 않는다. 우리 주변에 있는 모든 "black" 물체는 대부분 불을 껐을때 그 색이 된다. 이 말은, 그들은 실제 black이 아니고, dark grey이다. 길은 black이 아니다. 그림자도 black이 아니다.

이 개의 칼라는 dark grey이지 black이 아니다이 개의 칼라는 dark grey이지 black이 아니다


조심스럽게 골랐던 칼라들 옆에 순소한 black을 놓으면, black은 다른 모든것들을 압도해버린다. 이것은 자연스럽지 않기때문에, 눈에 띄게 된다. 우리가 매일 사용하는 많은 앱들은 기본으로 black을 가지지만, 이 black은 실제 black이 아니라 dark grey들이다. 예를들어 Asos 상단 바의 가장 어두운 색은 #000000가 아니라 #242424이다. 그러니 여러분의 칼라에 항상 채도를 조금 넣자.

ASOS에서 가장 어두운 칼라는 black이 아니다ASOS에서 가장 어두운 칼라는 black이 아니다


6. 칼라 대비를 이용하여 중요성 만들기
칼라는 눈을 가이드해주는데 도움을 주는 도구이다. 어떤것을 더 두드러지게 만들고 싶으면, 칼라를 더 대비되게 할 수 있다. 일반적으로 높은 대비는 중요한 내용이나 핵심 요소에대한 좋은 선택이다. 사용자가 어떤것을 보거나 클릭하게 하고 싶으면, 눈에띄게 만들어라!

대비는 화면의 남은 부분에비해 다른 영역으로 보이게 만든다. 어떤것을 더 두드러지게 만들고 싶으면, 칼라를 더 대비되게 할 수 있다대비는 화면의 남은 부분에비해 다른 영역으로 보이게 만든다. 어떤것을 더 두드러지게 만들고 싶으면, 칼라를 더 대비되게 할 수 있다


7. 사용자의 감정에 영향을주는 칼라를 사용하기
칼라가 고유의 의미를 가지고 감정을 자극할 수 있다는 사실은 이미 잘 알려진 사실이다. 이 의미는 사용자가 여러분의 제품을 지각하는데 직접적인 방법으로 영향을 줄 것이라는 의미이다.

당신이 앱/사이트를 위해 칼라 팔렛트를 선택할때는, 이것들이 어떻게 생겼는지 그냥 생각하지 말고, 이것들이 어떤식으로 느껴지는지도 생각해야한다. 당신이 고른 칼라는 여러분이 만들고자 했던 브렌드 아이덴티티와 잘 맞을수도있고 맞지 않을 수도 있다. 시작해보기위해, (서양의) 각 칼라와 기본적인 연관에대해 빠른 참조 가이드를 모아놓았다.

Red, Orange, Yellow
  • Red (정렬적인, 강력한, 위험한, 중요한): Red는 극도로 자극적인 칼라이다. 속도나 힘에대한 인상을 남긴다. 에너지의 칼라로 알려져있다. 이것은 혈액순환을 증가시키고 신진대사를 촉진하는 심리적 효과가 증명되어있다. 사람들이 왜 red를 볼 때 강하고 빠른게 읽는지에대한 이유이다. red를 사용하면, 사용자의 주의를 잡거나 주의가 필요한 개별 요소에 강조할 수 있다.
  • Orange (명량한, 에너지있는, 매력적인, 싼): Orange는 따뜻하고 활기찬 칼라이다. 에너지있는 아우라를 가지며, 사용자에게 따듯하고 환영하는 느낌을 만들어 줄 수 있다. 몇 연구자들은 Orange가 싸다는 느낌을 만드 것을 발견했다.
  • Yellow (쾌활한, 친근한, 자극하는, 시선을 끌고 싶어하는): Yellow는 당신이 정한 셰이드에따라 극도로 다재다능해지는 칼라이다. Light Yellow는 해와 관련 있어서 적극성이나 따뜻함과 소통한다. (gold와 같은) Dark Yellow는 고대나 시대의 인상을 준다. 이 darker 셰이드는 종종 영원이나 현명함에 관련되있다.


Green, Blue, Purple
  • Green (자연의, 안전의, 신선한): Green은 환경의 의미를 반경하고 자연과 가까운 의미를 가진다. 또한 성장을 나타내고, 이것이 왜 비지니스와 연관되는지의 이유이다. Green은 옳고 그름의 의미도 나타낸다.
  • Blue (고요한, 책임의, 신뢰할 수 있는, 의존하는): blue 칼라는 고요함과 편안한 감정과 관련되있다. 설득력과 신뢰도에도 관련이 되있고, 믿음과 전문가적인 이해를 준다. Blue는 내부적인 보안의 느낌을 발산한다. 이것이 은행이나 기술 회사가 blue를 사용하는 이유이다. 페이스북, 트위터, 링크드인같은 커다란 소셜 미디어는 모두 그들의 네트워크에 이 칼라를 사용한다.
  • Purple (럭셔리한, 미스테리한, 로멘틱한, 숭고한): 역사적으로 왕족과 연결되있는 purple는 그 제품이 최고급이라는 느낌을 넌시시 비친다.


Pink, Black, White, Gray
  • Pink (여성의, 순결의, 어린): Pink는 여성스러움과 관련되있는 것으로 알고있다.
  • Black (강력한, 세련된, 미스테리의, 뚜렷한): Black은 red를 포함한 다른 칼라들보다 빨리 주의를 끈다. 텍스트나 강조에만 일반적으로 사용되는 이유이다.
  • White (순수한, 건강한, 깨끗한, 순진한): White는 주변에 있는 다른 칼라들을 강조하고, 두번째 칼라로 인기있다.
  • Gray (자연적인, 형식적인, 세련된, 무미건조한): Gray는 중립을 나타내고, black이나 white의 성격을 가져갈 수 있다. 주 칼라로 사용될때, 형식적인 인상을 준다.



문화나 환경에따라 칼라의 의미가 다양해질 수 있다는 것이 중요하다. 이 부분에대해 더 많이 알고 싶다면, Symbolism Of Colors And Color Meanings Around The World 글을 확인해보자.

8. 디자인 접근성을 만들기
접근성(Accessibility)는 칼라로 디자인할때 핵심 고려사항이다. 오늘날의 제품들은 (사람의 능력에 상관없이) 모두를위한 접근성이 필요하다.

지시자로 칼라 혼자 사용되는 것을 피하기
약 8%의 남자들과 0.5%의 여자들은 색맥의 어떤 형태의 영향을 받는다. 12명의 남자들중 1명, 200의 여자들중 1명이다. 여러 형태의 조건이 있지만, red와 green 색맹이 가장 일반적이다. 색맹의 형태로 겪고있는 사람은 일반적으로 red와 green의 변색들을 보기 힘들 것이다.

정산적인 시각으로 보이는 칼라와 red-green 칼라 결핍으로 보이는 동일한 칼라(제2색맹과 적녹색맹)정산적인 시각으로 보이는 칼라와 red-green 칼라 결핍으로 보이는 동일한 칼라(제2색맹과 적녹색맹)



색맹은 (red-green, blue-yellow, moochromatic을 포함하여) 다른 형태를 받아드리므로 여러분의 제품에서 중요한 상태를 소통하기위해 여러 시각적 힌트를 사용하는 것이 중요하다. 칼라를 추가하고, 선, 지시자, 패턴, 텍스쳐, 엑션과 내용을 설명하는 틱스트등을 사용하자.

red 문자를 보지 못하는 사람들에게 극도로 답답한 경험을 줄 수 있으므로, red나 green 칼라만 사용한 정보전달은 피하라red 문자를 보지 못하는 사람들에게 극도로 답답한 경험을 줄 수 있으므로, red나 green 칼라만 사용한 정보전달은 피하라


텍스트에 낮은 대조는 피하라
칼라 대조는 디자인의 사용성에대해 칼라 이론이 중요하게 생각하는 한 분야이다. 텍스트에 칼라를 사용하고 있으면, 두 칼라가 서로 낮은 값 대비(low value contrast)로 옆에 놓이면 여러분의 카피는 굉장히 읽기 힘들어진다는 것을 알고 있어야한다.

낮은 대비의 텍스트는 잠재적으로 많은 앱들의 사용성을 망가뜨릴 수 있다낮은 대비의 텍스트는 잠재적으로 많은 앱들의 사용성을 망가뜨릴 수 있다


백그라운드와 포그라운드의 칼라가 색맹의 사람들과 시력이 낮은 사람들에게 충분히 대조되는지 검증하자. 그렇게 어려운 일이 아니다. 명암비(contrast ratio)를 확인하면 끝이다. 명암비는 한 칼라가 또다른 칼라와 얼마나 다른지 표현한다(일반적으로 1:1 혹은 21:1 이런식으로 쓴다). 비율에서 두 숫자의 차가 높을수록 두 칼라 사이에 상대적 휘도(luminance) 차이가 크다는 것이다. W3C는 바디 텍스트와 이미지 텍스트에대해 아래  명암비를 추천한다.
  • 작은 텍스트는 백그라운드에대해 적어도 4.5:1의  명암비를 가져야한다.
  • 큰 텍스트(14pt 볼드/18pt 기본 보다 큰)는 백그라운드에대해 적어도 3:1의 명암비를 가져져야한다.
좋은 소식은, 이것을 직접 확인하지 않아도 된다는 점이다. Color Contrast Checker 도구를 사용하여 그냥 몇번의 클릭으로 칼라 조합을 확인할 수 있다.

Webaim 칼라 대조 체커Webaim 칼라 대조 체커


보너스: UX 디자이너를 위한 필수 도구들
쉽게 일하기 위해 칼라 팔렛트를 고르는데 최고의 도구들을 알려주겠다.

Adobe Color CC(이전에는 Kuler로 알려졌다)는 칼라 스킴을 찾고, 수정하고, 만드는데 훌륭한 도구이다. 팔렛트에 있는 모든 칼라는 몇번의 클릭으로 개별적으로 수정하거나, 기본 칼라로 정할 수 있다. 팔렛트를 저장하고 라이브러리에 넣을 수도 있고, 이 사이트의 커뮤니티에서 만든 여러 훌륭한 칼라 스킴들이 있다.

Adobe Color CC는 다양한 칼라 스킴 선택을 빠르게 탐험해볼 수 있는 멋진 도구이다Adobe Color CC는 다양한 칼라 스킴 선택을 빠르게 탐험해볼 수 있는 멋진 도구이다


다른 디자이너가 사용한 특정 칼라에대해 비주얼 조사를 하고 싶으면, dribbble.com/colors로 가서 필요한 칼라를 선택하자.

shot에 포함된 칼라의 최소 퍼센트를 지정할 수도 있다(이 shot은 30% blue이다)shot에 포함된 칼라의 최소 퍼센트를 지정할 수도 있다(이 shot은 30% blue이다)


shot에 포함된 칼라의 최소 퍼센트를 지정하기shot에 포함된 칼라의 최소 퍼센트를 지정하기


메트리얼 디자인 가이드라인은 일러스트레이션에 사용되거나 브랜드 칼라를 개발하는데 사용될 수 있는 굉장한 칼라 팔렛트를 제공한다. 이 팔렛트의 모든 칼라들은 서로 조화롭게 동작한다.


Colorzilla는 구글 크롬과 모질라 파이어폭스에서 가능한 익스텐셔이다. 여기에는 color picker, eye-dropper, CSS gradient generator, palette browser을 포함하여 칼라 관련 것들을 담고있다.



Coolors는 다중칼라의 스킴을 만드는데 강력한 도구이다. 선택된 칼라를 잠그고, 새로운 팔렛트를 생성하기위해 스페이스바를 누르면 된다. 이 도구의 멋진 점은 한 결과만 나오도록 제한하지 않았다는 점이다. 참조 포인트를 수정ㅎ여 간단하게 몇개의 칼라 스킴을 얻어낼 수가 있다.


내가 칼라 스킴을 만드는 개인적인 방법으로는 사진을 이용하는 것이다. 이 도구는 이미지를 업로드하여 그것으로부터 칼라 팔렛트를 만들어준다.

Coolors는 이미지를 업로드하여 그것으로부터 칼라 팔렛트를 만들어준다Coolors는 이미지를 업로드하여 그것으로부터 칼라 팔렛트를 만들어준다


Color Blindness Simulation in Adobe Photoshop
포토샵으로 당신의 디자인의 접근성 테스트를 할 수 있다. 그냥 View > Proof Setup으로 가서, 적녹색맹과 제2색맹(Protanopia-type이나 Deuteranopia-type), 두 타입중에 선택할 수 있다.



디자인의 접근성 이슈를 막기위해, 디자인하는동안 스스로 색맹의 경험을 해보는 것도 좋은 방법이다. NoCoffee Vision Simulator는 어느 페이지에서도 칼라-시력 결핍이나 낮은-시력 조건으로 시뮬레이팅할 수 있게 해준다. 예를들어 "Color Deficiency"를 사용하여 "Deuteranopia"를 설정하면 웹페이지가 흑백으로 보인다. 이것이 시각적인 저하의 사용자에게 당신의 디자인 접근성을 만드는데 도움을 줄 것이다.




 칼라는 디자이너의 툴킷 중에 가장 강력한 도구 중 하나이다. 그러나 동시에 통달하기에 까다로운 도구이기도 하다. 위에서 말한 규칙들이 새로운 디자이너들에게 좋은 토대가 되길 바란다. 이제 실전으로 가볼 시간이다. 칼라 스킴에서 훌륭해지는 최고의 방법은 실제로 만들어 보는 것이기 때문이다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

트랙백  0 , 댓글  0개가 달렸습니다.
secret
제목: UI Animation: Please Use Responsibly



지난 몇년간 프로토타입 툴이 터져나왔는데, 이것은 디자이너들에게 세부적인 인터렉션을 만들 수 있는 기회를 주게 되었다. 디자이너는 이 틀울 배우는데 몇시간이나 몇일을 쓰고 있다. 그러나 많은 디자이너들이 프로토타이핑 툴의 선택의 기술적 세부사항에서 놓히고있는게 있다. 디자이너들은 몇걸음 뒤로 물러서서 애니메이션의 목적과 목표가 무엇인지 질문을 던저여한다. 어떤 의도로 애니메이션을하면 모션은 의사소통을위한 도구로서 사용된다. 디자이너들은 사용자에게 방해가되는 경박한 애니메이션 사용을 피해야한다.

디자이너들은 디자인 문제를 해결하기위한 이점으로서 애니메이션을 사용해야한다. 예를들어 계속성을 보여준다던지 들어가고 나오는 애니메이션을 통한 오브젝트 사이에 관계를 보여준다던지 하는 것들이 있다. 선택에대한 개선을 위해 인식 로드(cognitive load)를 줄임으로서 의미있는 애니메이션은 사용자를 기쁘게하고 정보를 제공한다.

인식 로드를 줄이기
인식 로드는 작업을 완료하기위해 필요한 정신적 노력의 양을 말한다. 위키피티아에서 "큰 인식 로드는 작업 완수에 부정적인 영향을 줄 수 있다"고 말하고 있다. 사용자가 사이트에 들어와있을때, 그들은 정보를 넘치도록 받는다. 그 결과 '터널 시야'라고 알고있는 선택적 태도를 가지는데, 화면에서 그들이 작업하고 있는 부분에 직접적으로 집중한다는 의미이다. 따라서 사용자는 화면에 있는 모든것을 보지는 않을 것이다.

디자이너로서, 사용하기 쉬운 인터페이스를 만드는 것은 중요한 일이다. 이것은 사용자가 작업을 완수하는데 드는 정신적인 노력을 가볍게 해준다. 디자이너들은 이런점을 어떻게 애니메이션으로 달성할 수 있을까? 우리가 모션을 잘 사용할때, 이것은 사용자 피드백과 효과적으로 소통하여 사용자 혼란을 줄여준다. 추가적으로 사용자 생각을 없애므로서, 페이지의 "액션을 부른다"던지 그런 더 중요한 것들에 주의를 기울일 수 있게 된다.


사용자의 주의를 끌기
NNgroup은 "애니메이션을 써서 효과적인 방법은 사용자의 시선을 끄는 것이다"고 말했다. 사용자의 시선을 끌게되면 스크린과 화면안의 요소들 사이의 계층과 관계를 보여주는데 집중시켜 가이드를 할 수 있게 해준다는 이점이 있다.

애니메이션은 사용자 화면에 바로 놓이면 안된다. NNgroup 글에서는 주변의 뷰 중에 움직임은 주변의 잠재적 위험을 인식하는 생물학적 특성덕분에 사용자 시선을 빠르게 끌 수 있다. 그러나 사용자가 의된 사이즈의 사이드바나 헤더에 있는 전형적인 베너나 팝업에 주목하지 않으려고 해왔는데, 디자이너들은 UI와 애니메이션이 이 패턴을 밟지 않도록 반드시 확신해야한다. 디자이너들은 한번에 최소한의 모션만하고, 관련된 정보가 있을것이라 사용자가 생각하는 위치에 요소를 애니메이션하여 무분별한 베너를 피할 수 있다.

시각적 계층
화면에서 페이지 요소가 로드되는 순서를 애니메이션하는 것은 페이지의 시각적 계층을 보여줄 수 있다. 미묘한 애니메이션을 이용하여 페이지의 레이아웃을 사용자게게 보여줄것이고 인식 로드를 줄이는 것에 초점을 맞출 수 있다.

추가적으로 다른 요소에대해 같은 애니메이션을 사용하여, 그 요소들이 그룹화되있고 비슷한 동작을 취한다는 이해를 돕는데 도움이될것이다. 사람의 마음은 항상 새로운 패턴을 찾고있다.

더 나은 선택을 만들기
미시 인터렉션(microinteraction, 한 오브젝트의 이동)과 거시 인터렉션(macrointeraction, 오브젝트 사이의 이동)에서의 모션은  사용자 문맥을 제공하고 시스템을통한 지속성을 보여준다. 또한 모션은 새로운 인터렉션이나 제스처를 사용자에게 가르쳐줄 수 있다. 잘 사용된 애니메이션은 정보들이 어떻게 맞아떨어지는지 빠르게 이해할 수 있게 해주며 결과적으로 더 나은 결정을 할 수 있게 해준다.

애니메이션은 발견할 수 있게 해주는 능력을 가지고있다. 상태간의 트랜지션은 한 오브젝트의 기능을 소통할 수있게 한다. 예를들어, 메뉴 아이콘이 닫기 아이콘으로 바뀌어서 사용자에게 같은 버튼이 두 동작을 완료한다는 것을 보여준다.

애니메이션은 사용자가 공간적 정보의 마음의 지도를 만드는데 도움을 준다. 작은 화면에서는 이것이 중요하다. 한 사용자가 화면미로안에서 쉽게 길을 잃어버릴 수 있다. 예를들어 사용자가 오른쪽으로 계속 스와이핑하여 페이지 깊숙히 들어간다. 몇몇 사용자는 왼쪽으로 스와이핑하여 메인페이지로 돌아갈 수 있다는 것을 발견할 것이다. 발견가능성을 보장하기위해, 애니메이션과함께 시각적인 행동유도성(affordances)이 사용되어야 한다.

적응시키기(Onboarding)
애니메이션은 인터렉티브한 적응을 도와준다. 적당한 시점에 적절한 것을 사용자에게 보여줌으로서, 디자이너들은 진행하는 것을 보여준다(Designers are creating progressive disclosure). 진행 모습은 사용자가 봐왔던 잡다한 것을 줄여서 시스템을 이해하기 쉽게 만들어준다. 앱이 어떻게 동작하는지 새로운 컨텐트를 배우는동안 정밀한 애니메이션은 편하게해준다. 결과적으로 이것은 사용자에게 무엇이 중요한지 기억하는데 도움이 된다.

기쁨을 만들기
애니메이션은 사용자가 기쁘고 사용자 경험을 증진시키는데 멋진 방법이다. 그러나 애니메이션으로 사용자를 기쁘게하기전에 디자인너들은 사용자의 기본 기대를 충족시켜줘야하고 깨진것을 번저 제거해야한다. 그렇지않으면 즐거움이 없는 애니메이션을 느낄것이다. 애니메이션의 빈도(frequency), 지속(duration), 속도(speed)는 사용자의 시스템 이해에 영향을 준다. 이것이 왜 디자이너들이 애니메이션을 만들때 심사숙고해야하는지 그 이유다.


기쁨을 위한 애니메이션 추가를위한 적절한 장소는 그들이 원하는 것을 보여주면서 놀라게 해줄때이다. 예를들어 무료 배송같은 것들이다. 애니메이션은 사용자에게 방해가 되지 않아야한다.

빈도
디자이너는 사용자에게 이 애니메이션이 얼마나 자주 나타날지 생각해야한다. 첫번째로 보여지는 애니메이션은 신선하고 사용자를 기쁘게할 수도 있지만, 신선함과 기쁨은 그 후에 성가신것이 될수 있다. NNGroup은 사용자 테스트 세션동안 다음을 찾아냈다. 참가자들이 말한 내용이다: "이 [애니메이션]은 처음 보기엔 멋지지만 지금은 성가신것이 되었다"

지속
디자이너는 사용자들이 애니메이션을 기다리다가 그 작업을 포기하기 전에 얼마나 기다릴 수 있는지 알아야한다. NNGroup 연구는 100ms까지는 사용자에게 나타나야함을 보여준다. 애니메이션이 좀 길게 걸린다는 것을 파악하고, 그 시간 범위는 150ms에서 350이다. Val Head에 따르면 일반적인 애니메이션 가이드라인은 200ms에서 500ms 사이에 실행되는 것이다. 그 목적은 애니메이션이 자연스럽게 보이게 만들기 위함이다. 사용자들은 보기에 친숙한 것으로 식별하기때문에 결국 디자이너의 결정에 달려있다. 애니메이션이 얼만큼의 빠르기로 실행되어야하는지 적당한 선이 있는데, 너무 빨리 빠르면 사용자가 너무 느리게 놓칠 수 있으며, 너무 느리면 사용자는 시스템이 느리다고 인식 할 수 있습니다.

속도
애니메이션의 전반적인 속도는 성능의 인지에 영향을 줄 수도 있다. 느린 애니메이션은 전반적인 시스템이 느리다고 생각하게 만들 것이다. 그러나 지연을 숨기고 사용자가 인지하는 성능 증가를 유지하기위해 애니메이션을 사용할 수도 있다.

로딩 애니메이션은 시각적 피드백과 함께 나타나 사용자를 잡아둔다. 결과적으로 사용자는 기다리는 시간을 더 짧게 느낀다. 애니메이션의 사이클 수는 지각하는 속도를 높힐 수 있다. 페이스북은 스켈래톤 컨텐트 로딩 애니메이션을 가지고 있다. 이것은 전통적인 로딩 스피너로 만든 우아한 솔루션이다. Viget의 연구에서는 사람들이 일반적인 애니메이션보다 브랜드로된 로딩 이미지에대해 더 길게 기다릴 것이라는 점을 발견했다.


접근성
디자이너들은 애니메이션 접근성을 고려해야한다. 무질서하게 개별적인 모션은 현기증나고 지겹고 혼란스럽게 만들 수 있다. iOS7에서 화면 이동(transition)이나 백그라운드로 가는 애니메이션을 선택적으로 끌 수 있게 해놓은 이유이다. 백그라운드에있는 방식은 포그라운드보다 더 천천히 움직이는 시간차 스크롤은 올바르게 사용되지 않는다면 혼란을 만들 수도 있는 모션의 예시이다. 이것을 해결하기 위해서는, 디자이너들이 '큰' 동작의 애니메이션을 자동으로 실행시키지 않도록 해야한다. 사용자들이 애니메이션을 시작한다면 좀 더 준비되있을 것이고 방심한 틈을타 당하지 않을 것이다.


웹 접근성는 애니메이션이 적용된 컨텐트를 확인하는것이 텍스트 형태로 표현되는 것을 추천한다; 시각적으로 감소된 컨텐트와 무질서하게 사용자에게 접근하는 것을 접근하게 해준다. 디자이너들은 영향이 없는 사용자들이 그 작업흐름을 빨리하기위해 애니메이션을 끌 수 있어야한다는 상황도 알고 있어야한다. 제일 좋은 방법은 W3C 가이드라인에 따른 애니메이션 접근성을 만들기 위해서는 Web Accessibility를 확인하라.



디자이너들은 마음속에 아래 습관들을 기억하고 있어야한다.

체크리스트:
목표 : 애니메이션이 사용자에게 전달하고 싶은 것이 무엇인가?
초점 : 사용자의 현재 초점이 어디인가? 사용자가 찾고 있는 것이 무엇인가?

모션의 메카닉:
빈도 : 애니메이션을 얼마나 자주 실행하나?
지속 : 애니메이션을 얼마나 길게 실행하나?
속도 : 애니메이션을 어떤 속도로 실행하나?
발생 : 어떻게해서 애니메이션이 발생하나? 사용자 동작으로부터? 아니면 자동적으로?
접근성 : 사용자가 애니메이션을 껐을때 어떻게 사용자 경험에 영향을 줄 것인가?

디자이너들은 체크리스트의 항목으로 모션 스타일 가이드를 만들고 싶어할 것이다. 컨텐트와 시각적인것은 스타일 가이드가 있으며, 리스트에 애니메이션을 추가함으로서, 디자이너들은 전반적으로 일반적인 경험을 만들고 싶어한다. Google의 Material design and Slaesforce의 Lightning Design 좋은 예시 자료이다.

참조:



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

트랙백  0 , 댓글  0개가 달렸습니다.
secret
제목: How to use colors in UI Design


실질적인 팁과 도구들


색은 모든것과같고(Color is like everything else), 알맞게 사용하는 것이 최고이다. 여러분의 칼라 스킴에서 색을 최대 세가지로 제한하면 더 나은 결과물을 낼 수 있을 것이다. 디자인 프로젝트에 칼라를 적용시키는것은 균형을 맞추는 수많은 작업을 가지며, 더 많은 칼라를 사용할수록 그 균형을 맞추기 더 복잡해진다.


칼라는 디자인에 좋은 품질을 더하지 않는다-더 강력하게 만든다.
Pierre Bonnard

여러분 팔랫트에 정의해놓은 것에서 색을 추가해야 한다면, 쉐이드와 틴트를 사용하자. 이것은 다른 톤으로 작업할 수 있게 해준다.

60-30-10 규칙
이 인테리어 디자인 규칙은 시대에 상관없이 칼라 스킴을 쉽게 서로 놓게해주는 데코레이팅 기술이다. 60% + 30% + 10% 균형은 칼라에 균형을 맞춰준다. 이 공식은 균형에대한 이해를 만들어주고 집중하는 지점에서 다음까지 눈을 편안하게 이동할 수 있게 해주기때문에 잘 먹힌다. 또한 사용하기에도 매우 간단하다.

60%는 주요 색상(dominant hue)이고, 30%는 두번째 칼라, 그리고 10%는 강조하고싶은 칼라이다.



칼라의 의미
과학자들은 몇세기동안 특정 칼라에대한 심리적 영향을 연구해왔다. 미학 외에도 칼라는 감정(emotions)과 연상(associations)의 창조자다. 칼라의 의미는 문화와 환경에따라 다양하다. 이것이 왜 흑&백 패션 매장을 보는지의 이유이다. 그들은 우아하고 숭고해보이고 싶다.


  • 빨강색: 열정의, 사랑의, 위험한
  • 파랑색: 고요한, 책임감있는, 안전한
  • 검정색: 미스터리한, 우아한, 악의
  • 하얀색: 순수한, 고요한, 깨끗한
  • 초록색: 새로운, 신선한, 자연의

더 많은 리스트를 보고싶으면 color culture를 확인해보자.

먼저 그레이스케일부터
디자인에서 처음부터 칼라와 톤으로 작업하고싶어하지만, 이런 행동은 당신이 주요 칼라를 조정한다고 3시간을 쓰고있다는 것을 알아차렸을때 당신은 배신해버릴것이다... 매우 매혹적이긴하나 이런 태도를 피하는 법부터 배워야한다.

대신에 공간을 정하고 요소들의 레이아웃을 잡도록 해야한다. 이렇게하면 여러분의 많은 시간을 단축시킬 것이다. 몇 제약은 매우 생산적이다. 필립(flips)은 지루하지 않게 보여야한다. 좋게 보이려면 다른 톤을 시도해보자.


순수한 그레이스케일과 점정으로부터 떠나기
내가 배웠던 가장 중요한 칼라 기법중 하나는 채도없는 그레이 칼라 사용을 피하는 것이다. 실제 세상에서 순수한 그레이 칼라는 거의 존재하지 않는다. 검정도 마찬가지이다.

여러분의 색에 조금이라도 채도를 항상 넣자. 잠재적으로 사용자에게 더 자연스럽고 친근하게 보일 것이다.




자연을 믿자
최고의 칼라 조합은 자연에서보터 나온다. 그들은 항상 자연스러워보인다. 디자인 솔루션을 위한 환경을 찾는 가장 좋은 방법은 항상 팔레트가 바뀐다는 점이다.
영감을 얻기 위해서는 단지 주변을 둘러보면 된다
대비를 기억하자
몇 칼라들은 서로 잘 맞지만, 다른 것들은 그렇지 않을 수 있다. 칼라 휠에서 가장 잘 관찰되는 인터렉트가 무엇인지에대한 명확한 규칙들이 있다. 이 방법을 알고 있어야하지만 손수 할 필요는 없다.


여러분이 칼라 이론에대해 더 배우고 싶다면 이 글을 확인해보자-Color Theory For Designers: Creating Your Own Color Palettes


영감을 얻자
UI 참조에대해 이야기할때는 dribbble이 최고이다. 칼라로 검색하는 도구도 가지고 있어서, 다른 디자이너들이 사용한 특정 칼라에대한 시각적 조사를 하고싶으면 여기로 가보자 dribbble.com/colors


비디오, 출력 디자인, 인테리어 디자인, 패션... 그 많은것이 한곳에 모여있다. 이 팔랫트에서만 있지말고 관심있는 모든것을 저장하자.

  

종종 나는 KPOP 비디오클립에서 칼라를 따내기도한다. 이것들은 매우 훌륭하다.

도구들
쉽게 작업하기위해, 2017년에 사용할 수 있는 칼라 파랫트의 최고의 툴들을 묶어보았다. 이것들은 여러분의 시간을 많이 단축시켜 줄것이다.

Coolors.co
칼라를 선택하는데 명백하게 내가 제일 좋아하는 툴이다. 선택된 칼라에 락을 걸어놓고 공간을 누르면 팔랫트를 만들어준다. 또한 Coolors는 이미지를 업로드하여 그 이미지로부터 칼라 팔랫트를 만드는 기능도 제공한다. 이렇게 멋진 기능은 한 결과물에대해서만 제한이 없지만 대신에 참조 포인트를 수정할 수 있게 해주는 picker를 가진다.



Kuler
이 툴은 어도비에서 나온 툴이며, 긴 시간동안 우리 곁에있었다. 브라우저에서 데스크탑 버전으로 사용할 수 있다. 데스크탑 버전을 사용하고 있다면 포토샵에 칼라 스킴을 내보낼 수 있다.


Paletton
Kuler와 비슷하지만 다섯개의 톤으로 제한되지 않는다는 점이 다르다. 톤을 추가해가면서 주요 칼라가 필요할때 좋은 툴이다.


Designspiration.net
칼라 팔랫트에대한 아이디어는 있지만 그것을 섞은 예시자료가 필요하다고 생각해봐라. Designispiration는 이런 당신을 위한 좋은 도구이다. 5개의 칼라를 골라서 여러분의 쿼리에 맞는 이미지를 검색할 수 있다. 특정 팔랫트로 이미지를 찾을 수 있을 뿐 아니라 디자인에서 실제로 구현된 것이다.

Shutterstock Lab Spectrum
내가 고른 칼라로 사진을 찾고 싶으면 어떨까? 흠, Shutterstock는 특정 톤으로 사진을 찾는 Spectrum이라는 도구를 가지고있다. 검색에 뭔가 쳐넣을 필요가 없는데, 물방울표시로 작은 미리보기 이미지가 팔랫트를 생성해줄 것이기 때문이다.


Tineye Multicolr
그러나 사진에 있는 여러 칼라를 찾고 싶고, 각각의 양을 고르고 싶으면 Tineye가 도와줄 것이다. 이 웹사이트는 Flickr로부터 1000만개의 창의적인 일반 이미지를 데이터베이스에 쓰고 있다.
<동영상, viemo>

마지막의 생각들
칼라는 마스터하기에 힘든 개념이고, 특히 디지털 영역에서는 더 그렇다. 위에서 말한 팁들은 올바른 칼라를 선택하는 일에 도움이 될 것이다. 멋진 색채 스킴를 만드는 법을 배우는 가장 좋은 방법은 여러분 자신을 위해 열심히 연습하고 색을 가지고 노는 것이다.


이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

트랙백  0 , 댓글  0개가 달렸습니다.
제목: Creating Usability with Motion: The UX in Motion Manifesto



역자: 이번 번역글은 늘 번역하던 개발관련 주제가 아닌데다 어려운 용어가 많아서 고민을 많이 했습니다. 제 번역글에서 부자연스러운 부분이나 잘못된 번역이 있다면 편하게 알려주시면 감사하겠습니다.




아래 선언서에는 "UX, UI 디자이너로서, 사용성을 위해 언제 어디서 모션을 구현해야하는지 어떻게 아는가? 질문에 대한 답변이다.

지난 5년동안, 나는 40개국 이상을 다니면서 몇백개의 상위 브렌드와 디자인 컨설던트, UX & UI 디자이너를 코치하고 멘토링하기위해 특별히 기여해왔고 UI 애니메이션에대한 튜토리얼을 했다.

그후 15년동안 사용자 인터페이스에대한 모션을 연구하여, 나는 모션을 사용한 UX 프로젝트에서 사용성에대해 12개의 특정 기회가 있다는 결론에 도달했다.

나는 이 기회를 "모션에서 UX에대한 12가지 원칙"이라 부르며, 이것들은 수많은 창조적인 방법으로 서로 쌓이고 섞일 수 있다.

나는 선언서을 5단계로 나누었다:
  1. UI 애니메이션 주제를 다루기-여러분이 생각하는 그런것은 아니다
  2. 실시간 vs 비실시간 인터렉션
  3. 모션이 사용성을 지원하는 여러방면
  4. 원칙, 기술, 프로퍼티, 값
  5. 모션에서 UX에대한 12가지 원칙

빠른 플러그로, 모션과 사용성에관한 주제에관해 학회나 워크샵에서 야러분의 팀위한 나의 강연을 원한다면, 여기로 가봐라. 여러분의 도시에서 수업에 참석하고 싶으면, classes">여기로 가보아라. 마지막으로 여러분의 프로젝트에대해 컨설팅을 받고 싶으면, 여기로 가면 된다. 내 목록에 추가되려면 여기로 가면 된다.



UI 애니메이션에 관한 것이 아니다
사용자 인터페이스에서 모션에관한 주제는 대부분 디자이너가 'UI 애니메이션'이라고 이해하고 있기 때문에(그렇지 않다), 12가지 원칙에 들어가기 전에 약간의 문맥을 만드는 것을 좋아한다.

디자이너들은 'UI 애니메이션'을 보통 더 즐거운 사용자 경험을 만드는 것이라 생각하지만, 전반적으로 어떤 가치를 더하지 않는다. 그러므로 UI 애니메이션은 종종 UX의 의붓자식처럼 다뤄진다(모든 의붓자식들에게 미안하다). If at all, it usually comes at the end, as a final lipstick pass.

추가로 사용자 인터페이스의 문맥에서의 모션은 디즈니의 12 애니메이션 원칙 문제 아래에 이해할 수 있게 잡혀있는데, 내가 쓴 'UI Animation Principles — Disney is Dead'에서 이야기해놓았다.

나의 선언서에는, 구성을 아키텍트화함으로서, UI 애니메이션은 '모션 원칙에서의 12가지 UX'가 된다는 경우로 만들것이다.

이렇게하여, 내가 말하고자하는 바는, 한 구조는 (요구하는 구성이) 존재하기위해 물리적으로 만들어져야하지만, 무엇이 만들어질지를 결정하는 안내는 원칙의 도메인으로부터 나온다.

애니메이션은 모두 도구에관한 것이다. 원칙들은 도구의 사용이나 그런것을 가이드하는 아이디어들의 실제 응용이다. 원칙들은 디자이너에게 높은 사용 기회를 제공한다.

많은 디자인들이 'UI 애니메이션'를 사실 디자인의 더 높은 형식성의 실행이라 생각한다: 실시간과 비실시간 이벤트동안 인터페이스 오브젝트의 시간적인 동작.



실시간 vs 비실시간 인터렉션
이 접점에서, '상태(state)'와 '동작(act)' 사이의 구별이 중요하다. UX에서 무언가의 상태는 근본적으로 정적이다. 마치 디자인 시안처럼 말이다. UX에서 무언가의 동작은 근본적으로 시간적이고 모션 기반이다. 한 오브젝트가 마스크된 상태에 있을 수 있고 혹은 마스크되고있는 동작에 있을 수 있다. 만약 후자이면, 모션이 포함되있고 때에 따라 사용성을 제공할 수도 있다.

추가로 인터렉션의 모든 시간적 양상은 실시간이나 비실시간으로 일어난다고 생각될 수 있다. 실시간은 사용자 인터페이스에서 사용자가 오브젝트와함께 직접 상호소통한다는 의미이다. 비실시간은 오브젝트 동작이 상호소통 이후에 일어난다는 의미이다: 사용자 동작 후에 일어나고 이동된다.



이 구별은 중요하다.

실시간 인터렉션은 '직접 조작'으로 생각할 수 있는데, 사용자는 인터페이스 오브젝트와 직접적으로 그리고 즉시 소통하고있다. 인터페이스의 이 동작은 사용자가 사용하고 있음으로서 일어난다.

비실시간 인터렉션은 사용자가 입력은 넣은 후에만 발생하고, 그 트랜지션이 완료될때까지 가볍게 사용자 경험으로부터 사용자를 락킹시키는 효과를 가진다.

이런 구별법은 모션에서 UX의 12가지 원칙 세계로 떠나는 여행내내 이용하게 될것이다.


모션은 4가지 방법으로 사용성을 제공한다.
이 네가지 기둥은 사용자 경험의 시간적 동작이 사용성을 지원하는 4가지 방법을 표현한다.

예상(Expectation)
예상은 2가지 영역으로 나뉜다. 사용자가 어떤 오브젝트인지 감지하는것, 그리고 어떻게 동작하는지 감지하는것이다. 디자이너로서 말하자면, 우리는 사용자가 기대하는 것과 그들의 경험 사이의 갭을 최소화시키고 싶다.

연속성(Continuity)
연속성은 사용자 흐름에대해서나 사용자 경험의 '일관성' 둘다에 대한 이야기이다. 연속성은 '내부-연속성'(장면내의 연속성 그리고 '내부 연속성')이라는 용어로 생각될 수 있는데, 일련의 장면에 연속성은 전체 사용자 경험을 만든다.

설명적(Narrative)
설명적은 사용자 경험에서 이벤트의 선형적 과정이다. 이것은 시간적/공간적 프레임워크의 결과가된다. 이것은 처음부터 끝까지 사용자 경험을 연결하는 일련의 인지된 순간들이나 이벤트들로 생각할 수 있다.

관계(Relationship)
관계는 사용자의 이해와 선택을 돕는 인터페이스 오브젝트들 사이에서 공간적인, 시간적인, 계층적인 표현이다.


원칙, 기술, 프로퍼티, 값
Tyler Waye says it as good as any when he writes, "원칙...들은 기술의 어떤 수치를 증가시키는 기능의 약속, 규칙을 근간으로한다. 이런 요소들은 조화롭게 있으며, 무슨일이 일어나도 상관없다." 원칙들은 디자인의 어그노스틱(agnostic)이라는 것을 되풀이한다.

거기서부터, 제일 높은 원칙과 그 아래 기술, 그 아래 프로퍼티, 제일 아래에 있는 값으로서 한 계층을 생각해볼 수 있다.

기술은 원칙의 다양한, 제한이없는 실행들 혹은/그리고 조합들이라 생각할 수 있다. 내 생각에 기술은 '스타일'과 유사한것 같다.

프로퍼티는 기술을 만들기위해 애니메이션하게될 특정 오브젝트 파라미터이다. 이것들은 위치(position), 투명도(opacity), 스케일(scale), 로테이션(rotation), 앵커포인트(anchor point), 색깔(color), 선두께(stroke-width), 모양(shape)등을 포함한다(제한이 없다).

은 우리가 '애니메이션'이라 부르는 그것을 만들기위해 매번 다른 실제 수치의 프로퍼티 값이다.

그래서 여기에 들어가기위해(조금 뛰어들어가기위해), 하나의 가상의 UI 애니메이션 참조는 '블러된 글라스' 기술로 엄폐(Obscuration) 원칙을 사용하고있는데, 이 '블러된 글라스' 기술은 블러(Blur)와 투명도(Opacity) 프로퍼티를 25px, 70% 값으로한다고 말할 수 있다.

이제 해보기위한 몇 도구를 가졌다. 그리고 더 중요한것은, 이런 용어의 도구들은 모든 특정 프로토타이핑 툴의 아그노스틱(agnostic)이다.


모션에서 UX의 12가지 원칙들
이징(Easing)과 오프셋(Offset)&딜레이(Delay)는 타이밍(timing)과 연관된다. 페어렌팅(Parenting)은 오브젝트 관계(object relationship)에 연관된다. 값 변경(Value Change), 마스킹(Masking), 오버레이(Overlay), 클로닝(Cloning)은 모두 오브젝트 연속성(object continuity)에 연관된다. 페럴랙스ㄹ(Parallax)는 시간적 계층에 연관된다. 엄폐(Obscuration), 차원(Dimensionality), 돌리(Dolly)&줌(Zoom)은 모두 공간적 연속성에 연관된다.



원칙1: 이징(Easing)
오브젝트 동작은 시간적 이벤트가 발생할때 사용자 예상을따라 일어난다.



이즈(ease)는 시간적 동작이 나오는 모든 인터페이스 오브젝트이다(실시간이든 비실시간인든). 이징은 부드러운 사용자 경험에서 타고난 '자연주의(naturalism)'을 만들고 그렇게되도록 한다. 그리고 사용자가 기대하는대로 오브젝트가 동작할때 연속성의 이해가 만들어진다. 덧붙이자면 디즈니는 이것을‘Slow_In_and_Slow_Out">Slow In and Slow Out’'라 부른다.

 



왼쪽의 예시는 선형적인 모션이고 '나빠' 보인다. 제일 위에 첫번째 예시는 이징된 모션인데 '좋아' 보인다. 위의 세 예시는 정확한 프레임 수와 정확히 동일한 횟수로 시행된다. 오직 이징에서만 다르다.

디자이너는 사용성을 고민하기 때문에, 미학은 제쳐두고 어떤 예시가 더 사용성을 제공하는지 우리 스스로 엄격하게 요구하고 조사해야한다.

내가 여기서 보여주는 경우는 스큐어모피즘의 특정 수치는 이징에 내제되있다. 사용자 기대를 벗어나는 것이 적은 사용성의 인터렉션이 되는점에서 '이징 그라디언트(easing gradient)'를 생각해볼 수 있다. 사용자 기대치를 벗어나는 동작으로인해 사용가능한 상호작용이 적게되는 '이징 그라디언트(easing gradient)'를 생각해볼 수 있다. 적절히 이징된 모션의 경우에, 사용자는 모션 그자체가 고르고 눈에 걸리지않는 경험을 한다. 주의를 분산시키지 않기 때문에 좋은 일이다. 선형 모션은 명확히 보이고 어찌되었든 완료되지 않은것같고, 거슬리고 눈에 걸린다.

이제 나는 여기서 내 스스로를 완전히 반박하고 옳은 예시에대해 이야기 할 것이다. 모션은 고르지 않다. 사실 그렇게 느끼도록 디자인되었다. 우리는 오브젝트가 어떻게 올라가는지 인지한다.다르게 느껴지지만 여전히 선형의 모션 예시보다 더 '알맞게' 느껴진다.

이징을 적용하지만 여전히 사용성이 없는가(Can you employ easing and still have it not support (or worse case undermine) usability?)? 그 대답은 그렇다. 그리고 여러 방법들이 있다. 한 방법은 타이밍이다. 만약 타이밍이 너무 느리거나(Pasquele에서 빌렸다) 너무 빠르면, 예상을 벗어나고 사용자의 주의를 분산시킬 수 있다. 비슷하게, 이징이 브랜드나 전반적인 경험에 잘못된 선상에 놓이면, 예상과 고름에 부정적인 영향을 줄수도 있을 것이다.

여러분에게 열어주고 싶은 것이 무엇이냐하면, 이징된 모션이 될때의 기회이다. 당신이 디자이너로서 프로젝트에서 만들고 구현할 수 있는 사실상 무한한 숫자의 이징이 있다. 이 모든 이징들은 사용자에서 발생하는 그들의 고유 예상 반응을 가진다.

요약하기: 언제 이징을 사용할까? 항상이다.

원칙2: 오프셋&딜레이(Offset&Delay)
새로운 엘리먼트와 화면이 나올때, 오브젝트 관계와 계층을 정의한다.


오프셋&딜레이는 디즈니의 애니메이션 원칙에 영향을 받은 모션 원칙의 두 UX 중 두번째것이다. 이것은 'Follow_Through_and_Overlapping_Action">Follow Through and Overlapping Action'로부터 온 케이스이다.

실행에서는 비슷하지만 목적과 결과에서는 다른, 그 구현에대해 인지하는것이 중요하다.디즈니의 원칙은 '더 시선을끄는 애니메이션'의 결과가 되는 반면, UI 애니메이션 원칙은 더 사용가능한 경험의 결과가 된다.

이 원칙의 효용은, 인터페이스에서 사용자에게 오브젝트의 자연스러움에대해 뭔가 말함으로서, 성공을위한 사용자를 미리 인지시키는 세팅 작업이다. 위의 참조에서 설명적인것은 위 두 오브젝트가 결합되있고 아래 오브젝트는 분리되있다. 아마도 위 두 오브젝트는 상호소통하지않는 이미지와 텍스트일수 있는 반면 하단의 오브젝트는 버튼일 것이다.

사용자가 이 오브젝트가 무엇인지 인지하기 전이라도, 디자이너는 이미 그에게 오브젝트들이 다소 '분리'되있다고 말해왔다. 이것은 매우 강력하다.


위 예시에서, 플롯팅 액션 버튼(FAB)는 세개의 버튼을 포함한 헤더 네비게이션 엘리먼트로 변형된다. 버튼들이 각기 다른 시간에 '오프셋'되기때문에, 그들의 '분리'를 통해 사용성을 제공하게된다. 다르게 말하면, 디자이너는 시간을 사용하여 (사용자가 오브젝트를 인지하기 전일지라도) 오브젝트들이 분리되있음을 말한다. 이것은 사용자에게 말하는 효과를 가지고, 시각적 디자인으로부터 완전히 독립적이며, 인터페이스에서 오브젝트의 자연스러운 부분이다.

어떻게 하는지 보여주기위해 오프셋&딜레이 원칙을 나눈 예시를 보여주겠다.


위의 예시에서는 정적인 시각적 디자인이 우리에게 백그라운드 넘어에 아이콘들이 있다고 말한다. 아이콘들이 각자 서로 분리되고 서로 다른 일을 한다고 어림짐작할 것이다. 그러나 모션은 이것을 부정한다.

시간적으로는, 아이콘이 줄 단위로 묶여서 마치 한 오브젝트인것처럼 동작한다. 그 타이틀들도 마찬가지로 줄 단위로 묶여있어서 한 오브젝트처럼 동작한다. 이 모션은 사용자이 눈으로 본것과 다른 무언가를 말하고 있다. 이 경우에, 우리는 이 오브젝트의 인터페이스상 시간적 동작은 사용성을 제공하지 ㅇ낳고 있다고 말할 수 있다.

원칙3: 페어렌팅(Parenting)
다수의 오브젝트와 상호소통할때 공간적, 시간적 계층의 관계를 만든다.


페어렌팅은 사용자 인터페이스에서 오브젝트에 '관계'를 부여하는 강력한 원칙이다. 위 예시에서는, 상위 혹은 '자식' 오브젝트의 '스케일'과 '포지션' 프로퍼티는 하위 혹은 '부모' 오브젝트의 '포지션' 프로퍼티에 부모역할을 한다.

페어렌팅은 오브젝트 프로퍼티를 다른 오브젝트 프로퍼티에 연결한다. 이것은 사용성을 제공하는 방법으로 오브젝트 관계와 계층을 만든다.

또한 페어렌팅은 자연스러운 오브젝트 관계를 사용자에게 전달하면서 디자이너가 사용자 인터페이스상의 더 나은 동위의 시간적 이벤트를 만들 수 있게 해준다.

스케일, 투명도, 위치, 로테이션, 모양, 색깔, 값등을 포함한 오브젝트 프로퍼티를 재호출한다. 이런 모든 프로퍼티는 사용자 경험에서 시너지스틱한 순간을 만들기위해 다른 프로프터에 연결될 수 있다.

 



위에서 왼쪽 예시에서, 얼굴 엘리먼트의 'y축' 프로퍼티는 둥근 인디케이터 부모의 'x축' 프로퍼티에 자식역할을 한다. 둥근 인디케이터 엘리먼트는 수평 축을 따라 움직일때, 그 '자식' 엘리먼트는 수평과 수직을 따라 움직인다(마스크(또다른 원칙이다)되고 있지만).

이 결과는 동시에 발생하는 계층적인 시간의 설명적 프레임워크이다. 각각의 숫자에서 '얼굴'이 부분적으로 완전히 보이고 보이지 않는다는 점에서 '얼굴'은 일련의 '잠금 장치(lockup)'로 작동한다는 점을 인지하자. 사용자는 이런 고름을 경험하지만 우리는 이 예시에서 미묘한 '사용성 치트'가 있다고 말할 수 있다.

페어렌팅은 '실시간' 인터렉션으로는 최고의 기능을 한다. 상ㅇ자가 직접 인터페이스 오브젝트를 조작하기 때문에, 디자이너는 모션을통해 사용자에게 소통할 수 있다(어떻게 오브젝트들이 연결되있는지, 그들사이에 어떤 관계가 있는지)

페어렌팅은 3가지 형식으로 나타난다: '직접 페어렌팅(direct parenting)' (위에서 본 두 예시), '지연된 페어렌팅(delayed parenting)'과 '역 페어렌팅(inverse parenting)' (아래에서 보이는 것)

 



원칙 4 : 변형(Transformation)
오브젝트 기능이 바뀔때, 설명적 흐름의 지속적인 상태를 만든다.
 


모션 원칙 '변형'에서 UX에대해 이미 많이 알아보았다. 어떤 면에서는, 가장 명확하고 간파하기 쉬운 애니메이션 원칙이다.

변형은 보면 가장 알기 쉽고, 가장 눈에띄게 보인다. 'submit' 버튼의 모양이 원형의 프로그래스 바로 바뀌고 결국 확인 체크 표시의 모양으로 돌아오는 것은 우리가 인지하는 것이다. 이것은 시선을 잡아주고, 이야기를 말하며, 완료시킨다.


트렌스포메이션이 하는 일은, 다른 UX 상태나 '이다(is)'(이것은 버튼이다, 이것은 원형 프로그래스 바이다, 이것은 체크 표시이다)를 통해 사용자를 균일하게 트렌지션하여 결국 원하는 결과를 만들어낸다(원문: What Transformation does is seamlessly transition the user through the different UX states or ‘is’s’ (as in this is a button, this is a radial progress bar, this is a check mark) which eventually result in a desired outcome). 사용자는 이 기능적인 공간을 통해 최종 목적지로 이끌린다.

변형은 사용자 경험에서 고르게, 연속적인 이벤트로 핵심 순간들을 나누는 효과를 가진다. 이 고름은 더 나은 사용자 인지, 기억, 완수의 결과가 된다.

원칙 5: 값 변경
값 주체가 바뀔때, 동적이고 연속적인 설명적 관계를 만든다.


텍스트 기반 인터페이스 오브젝트(숫자나 글자를 표현하는)는 그 값을 바꿀 수 있다. 이것은 '정의하기 어려운 명확한(elusive obvious)' 개념중 하나이다.

텍스트와 숫자의 변경은 매우 일반적이어서 유용성을 지원할 때 자신의 역할을 평가할 수있는 구별과 엄격함을 제공하지 않으면서도 이를 통과시킨다.

그래서 값이 바뀔대 사용자 경험이 무엇일까? 사용저 경험에서는 모션 원칙에서 12가지 UX가 사용성을 제공하는 기회들이다. 여기 세가지 기회는 데이터 뒤의 현실성에이젠시 개념, 그리고 값 그자체의 동적인 자연스러움을 위해 사용자를 열결시키는 것이다.

아래 사용자 데시보드 예시를 보자.

 


값 기반 인터페이스 오브젝트가 '값 변경' 없이 불러오면 사용자에게 숫자가 정적인 오브젝트라는 것을 전달하게 된다. 이것은 시속 55마일 속도 제한을 표시하는 표지판과 비슷하다.

숫자와 값은 현실에서 일어나는 것들의 표현이다. 현실은 시간, 수입, 게임 스코어, 사업 메트릭스, 건강 추적 등일 수 있다. 모션을 통해 구별해야하는것은 '겂 주체'는 동적이고 값은 동적인 값 설정으로부터 무언가를 반영한다.

이 관계는 시각적인 값으로 구성된 정적 오브젝트로 인해 손실될뿐만 아니라 더 깊은 기회도 잃는다.

모션 기반 값에서 동적 시스템의 표현을 채택했으면, '뉴로피드백'같은 것을 활성화시킨다. 그 데이터의 동적인 자연스러움을 잡고있는 사용자들은 이제 값을 변경할 수 있게 되고 에이전트가 될 수 있게 한다. 값이 정적이면 값 뒤에 현실에 더 적게 연결되고 사용자는 에이전시를 잃는다.

  


값변경 원칙은 실시간 이벤트 비실시간 이벤트 둘 다로 나타날 수 있다. 실시간 이벤트에서는 사용자가 값 변경을 위해 오브젝트와 상호소통한다. 불러올때나 트렌지션같은 비실시간 이벤트에서는 동적인 설명을 반영하기위해 사용자 입력 없이 값을 변경한다.

원칙 6: 마스킹(Masking)
오브젝트나 그룹의 어떤 부분에의해 결정되는 기능이 나타나거나 숨겨질때, 한 인터페이스 오브젝트나 오브젝트 그룹에 연속성을 만든다.


이 마스킹  요청은 오브젝트의 모양간의 관계와 그 기능으로 생각할 수 있다.

디자이너들이 정적 디자인의 문맥에서 '마스킹'에 친숙하기때문에, 시간내 상태로서가 아닌 동작으로서 발생하는 모션 원칙 '마스킹'에서의 UX를 구별하는 것이 필요하다.

오브젝트의 범위를 드러내고 숨기는 시간적 용도를 통해, 기능은 연속적으로 고른 방법으로 트랜지션된다. 또한 설명적 흐름을 보존하는 효과도 가진다.


위 예시는, 헤더 이미지의 바운딩 모양과 포지션을 변경하지만 컨텐트는 변경하지 않은체 앨범이 된다. 마스크로 컨텐트롤 보존하면서, 이것은 그 오브젝트가 무엇인지 변경하는 효과를 가진다(꽤 멋진 기술로). 이것은 트랜지션이라 비실시간으로 일어나고, 사용자 액션을 받고 난 뒤에 활성화된다.

UI 애니메이션 원칙들은 시간적으로 일어나고, 연속성, 설명적, 관계, 예상을통해 사용성을 제공한다는 점을 기억하자. 위 참고자료에서 오브젝트 자체가 바뀌지 않은채로 남아있는 동안, 바운더리와 위치를 가지고 있고, 이 두가지 요인은 이게 어떤 오브젝트인지 결정한다.

원칙 7: 오버레이
층의 오브젝트가 종속된 위치일때, 설명적인 것과 시각적 2차원에서 오브젝트의 공간적 관계를 만든다.


오버레이는 비공간적 계층의 부재를 극복하기위해 사용자에게 2차원의 순서있는 프로퍼티들을 이용하게 함으로서, 사용성을 제공한다.

오버레이는3차원 공간이 아닌 곳에서, 다른 오브젝트보다 뒤나 앞에 있는 위치가 종속된 오브젝트들을 소통하기위해 디자이너들은 모션을 사용할 수 있다.

 


왼쪽의 예시는. 뒷편에 위치한 추가적인 오브젝트를 드러내기위해 앞편의 오브젝트를 오른쪽으로 민다. 오른편의 예시는, 추가적인 컨텐트와 옵션을 드러내기위해 전체 화면을 아래로 민다(각 사진 오브젝트를 소통하기위해 오프셋&딜레이 원칙을 사용하면서).

약간은 디자이너로서 레이어' 방법은 자명할 정도로 매우 명확하다. 우리는 레이어로 디자인하고 레이어 개념은 깊게 내재되있다. 그러나 '만드는것'과 '사용하는것'의 과정은 조심해서 구별해야한다.

계속해서 '만드는' 과정에 끌려가버린 디자이너로서, 우리가 만든 모든 오브젝트 부분들에 충분히 친숙하다. 그러나 사용자로서 눈에 보이지 않는 부분은 시각적으로나 인지적으로 숨겨진 정의와 동작에 의한 것입니다.

오버레이 원칙은 디자이너들에게 'z축' 위치의 레이어 사이에 관계를 통해, 사용자에게 공간적 방향을 개선한다.

원칙 8: 클로닝(Cloning)
새 오브젝트가 시작하고 출발할때, 연속성, 관계, 설명을 만든다.


새 오브젝트가 현재 화면에서 (혹은 현재 오브젝트로부터) 만들어질때, 그 출현에대해 설명적으로 알려주는 것은 중요하다. 이 선언서에서 나는 오브젝트 시작과 출발을위한 설명적 프레임워크를 만드는것이 강력하게 중요하다고 주장한다. 간단하게 투명도 조절은 이런 결과를 달성할 수 없다. 강력한 설명을 만들기위해 마스킹, 클로닝, 차원은 사용성 기반 세가지 접근법이다.

  


위 세가지 예시에서는, 사용자가 이 오브젝트에 집중하고 있는 시간동안 히어로 오브젝트로부터 새 오브젝트를 만든다. 접고 펼치는 위 두가지 예시의 접근법(주의를 잡고, 클론된 새 오브젝트의 생성을 통해 눈을 끈다)은 이벤트를 명확하고 모호하지않게 연결하여 소통하는 강한 효과를 가진다: 액션 'x'는 새 자식 오브젝트의 생성 'y'의 결과를 가진다.


원칙 9: 엄폐(Obscuration)
사용자에게 주요 시각 계층이 아닌 오브젝트나 화면에 관계에서 공간적으로 그 자체를 익숙하게 해준다.


모션 원칙의 마스킹과 비슷한데, 엄폐는 정적 현상과 시간적 현상 둘다에 존재한다.

시간적인 생각을 경험하지 못한 디자이너에게는 혼란스러울 수 있다(이것은 순간 사이의 순간이다). 보통 디자이너들은 화면대 화면을 디자인하거나 작업대 작업을 디자인한다. 엄폐라는것을 엄폐된 상태가 아니라 엄폐되는 동작이라고 생각하자. 정적인 디자인은 엄폐된 상태를 표현한다. 시간을 도입하여 엄폐되고있는 오브젝트의 동작을 만들어준다.

 


위의 두 예시에서, 엄폐를 볼 수 있는데, 투명한 오브젝트나 오버레이처럼 보인다. 또한 시간내 여러 프로퍼티를 포함하는 시간적 인터렉션이다.

여기서의 여러 일반적인 기술에는 블러 효과와 전체 오브젝트 약한 투명성(lessoning of overall object transparency)을 가진다. 사용자는 그가 동작하고있는 곳에 추가적으로 주요하지 않는 문맥을 알게 되었다(그 주요 오브젝트 계층 '뒷편에' 또다른 세계가 있다).

엄폐는 사용자 경험에서 뷰나 '목표 뷰'를 하나로 만들기위해 디자이너들이 보완할 수 있게 해준다.

원칙 10: 페럴랙스(Parallax)
사용자가 스크롤 할때, 시각적 2차원에서 공간적 계층을 만든다.


'페럴랙스'는 모션 원칙에서 한 UX로서 다른 비율로 움직이는 다른 인터페이스 오브젝트를 표현한다.

'페럴랙스'는 디자인 완결을 유지하면서 동시에 사용자를 주요 액션과 컨텐트에 집중하게 해준다. 페럴랙스 이벤트동안 사용자는 뒷편의 엘리먼트들은 뒤로 들어가있는 지각과 인식을 준다. 디자이너는 배경이나 도움을주는 컨텐트로부터 직접적인 컨텐트를 분리해낼 수 있게 페렐랙스를 사용할 수 있다.

 


사용자에게 있는 이 효과는 인터렉션의 지속시간, 다양한 오브젝트 관계를 명확하게 정의하는 것이다, 앞쪽의 오브젝트, 혹은 사용자에게 '가까히' 나타나서 '빠르게' 움직이는 오브젝트이다. 비슷하게, 뒷쪽의 오브젝트, 혹은 '멀리 있다'고 인지되어 '천천히' 움직이는 오브젝트이다.

디자이너는 이런 관계를 만들 수 있는데, 시간 자체를 사용하여 인터페이스에서 어떤 오브젝트가 높은 우선순위를 갖는지 사용자에게 알려준다. 따라서 뒷편에 밀어넣거나 상호소통하지 않는 오브젝트를 더 '뒤로'하여 이해할 수 있다.

시각적 디자인에서 어떤것이 결정되었는지를 넘어, 사용자들이 이제 인터페이스 오브젝트가 계층을 가진다고 인지할 뿐만 아니라, 이 계층은 이제 그 디자인/컨텐트를 의식하기 전에 자연스러운 사용자 경험을 사용자가 가지는데에 이용할 수 있다.

원칙 11: 차원(Diemnsionality)
새 오브젝트가 시작되거나 출발할때, 공간적 설명의 프레임워크를 제공한다.


사용자 경험에 중요한 점은 위치의 이해만큼 연속성의 현상이다.

차원은 2차원의 비논리적 사용자 경험을 극복하는 강력한 방법을 제공한다.

인간은 실제 세상과 디지털 경험 둘다 설명을 위해 공간적 프레임워크 사용에 두드러지게 적응된다. 공간적 시작이나 출발의 레퍼런스를 제공하면 사용자가있는 UX의 정신적 모델을 증진하는데 도움이 된다.

또한 Dimensionality Principle은 깊이가없는 객체가 같은 평면에 존재하지만 다른 객체의 '앞에 또는'뒤에 존재하는 시각적 인 평지의 계층적 역설을 뛰어넘는다.

차원은 세가지 방법으로 표현된다. 오리가미 차원(Origami Dimenstionality), 플롯팅 차원(Floating Dimenstionality), 오브젝트 차원(Object Dimenstionality).

오리가미 차원은 '접는' 혹은 '매딜린' 셈차원 인터페이스 오브젝트의 용어라 생각할 수 있다.

 


여러 오브젝트들이 '오르가미' 구조로 결합되기 때문에, 숨겨진 오브젝트들은 공간적으로 보이지 않더라도 아직 '존재한다'고 말할 수 있다. 이것은 효과적으로 사용자 경험을 랜더링하는데, 인터렉션 모델 자체에서나 인터페이스 오브젝트 그 자체의 시간적 동작에서 둘 다 사용자가 작업의 문맥을 이야기하고 만든다.

플롯팅 차원은 인터페이스 오브젝트에게 공간적 시작/출발을 제공하여, 직관적이고 매우 설명적인 인터렉션 모델을 만든다.


위 예시에서, 차원은 3D '카드' 사용을 통해 달성되었다. 이것은 시각적 디자인을 제공하는 강력한 설명적 프레임워크를 제공한다. 이 설명은 추가적인 컨텐트와 상호활동에 접근하기위해 카드를 '가볍게 튀기면서(flipping)' 연장된다. 차원은 갑작스러움을 최소화하는 방법으로 새 엘리먼트를 소개하는 강력한 방법일 수 있따.

오브젝트 차원은 실제 깊이와 양식으로 차원적인 오브젝트가 된다.

 


여기에는, 실제 공간적인 오브젝트를 형성하기위해 3D 공간에 여러 2D 레이어가 정렬되있다. 그들의 차원은 실시간과 비실시간 트랜지션의 순간에 드러난다. 오브젝트 차원의 이 기능은 사용자가 보이지 않는 공간 위치에 기반한 오브젝트 기능의 예리한 인지를 전개하는 것이다.

원칙 12: 돌리(Dolly)&줌(Zoom)
인터페이스 오브젝트와 공간이 이동할때, 연속성과 공간적 설명을 보존한다.


돌리와 줌은 영화에서의 개념인데, 카메라에 관련된 오브젝트의 이동이나 먼 샷에서 가까운 샷으로(혹은 그 반대도) 부드럽게 변하는 프레임에서 이미지 그자체의 크기와 관련된 오브젝트 이동을 의미한다.

특정 문맥에서, 3D 공간에서 카메라를 향해 이동하거나 3D공간에서 카메라가 오브젝트를 향해 카메라가 이동한다면, 오브젝트가 줌되는지 말하기는 불가능하다(아래 참조를 보자). 아래 세가지 예시는 가능한 시나리오를 설명한다.


'돌리'와 '줌'은 둘 다 연속적인 엘리먼트와 씬상의 변형을 포함함하고 모션 원칙에서 모션을 통해 사용성을 제공한다는 UX의 요구사항을 맞춘다는 점에는 비슷하지만, '돌리'와 '줌'의 인스턴스를 분리해서 다루는것이 적절하다.

  


돌리는 영화 용어인데, 물체를 향해 가거나/멀어지는 카메라 이동에 적용된다(또한 수평적 '추적의' 이동에 적용하는데, 사용성 문맥에는 적게 관련된다).


UX에서 공간적으로, 이 모션은 사용자의 시점에서의 변화이거나 오브젝트가 위치를 변경하면서 남아있는 고정되어있는 시점을 의미한다. 돌리 원칙은 연속성과 설명을 통해 사용성을 제공하고, 인터페이스 오브젝트들과 목적지간의 고른 트랜지션을 한다. 돌리는 차원 원칙과 통합하여 더 공간적인 경험과 더 깊이감의 결과를 만들고, 사용자에게 현재 뷰의 '앞'/'뒤'에 추가적인 영역이나 컨텐트를 알려준다.

줌은 시점이나 오브젝트가 공간적으로 이동하는것이 아닌 곳의 이벤트를 의미하지만, 오브젝트 자체가 스케일되는것이다(혹은 이것의 우리 뷰가 작아져서 확대된 이미지가 된다). 이것은 보는이에게 다른 오브젝트나 화면 안에 추가적인 인터페이스 오브젝트를 알려준다.


 고른 트랜지션(실시간, 비실시간 둘 다)으로 사용성을 제공한다. 돌리&줌 원칙에서 나온 고름은 공간의 정신적 모델을 생성하게될때 꽤 강력하다.



이 긴 것을 완주했다면, 축하한다! 야생의 선언서였다. 모든 gif들이 로딩되서 여러분의 브라우저를 죽이지 않았길 바란다. 또한 여러분 스스로를 위한 어떤 가치와 새로운 도구를 얻었길 바라며 여러분의 인터렉티브 프로젝트에 사용되길 바란다.

사용성을 제공하기위한 디자인 툴로서 어떻게 모션 사용을 시작할 수 있는지에대해 좀 더 배우길 바란다.

다시, 마지막 플러그로, 모션과 사용성에관한 주제에관해 학회나 워크샵에서 야러분의 팀위한 나의 강연을 원한다면, 여기로 가봐라. 여러분의 도시에서 수업에 참석하고 싶으면, 여기로 가보아라. 마지막으로 여러분의 프로젝트에대해 컨설팅을 받고 싶으면, 여기로 가면 된다.내 리스트에 추가되려면 여기로 가면 된다.



이 선언서는 아마존의 Kateryna Sitner의 끊임없는 피드백과 관대하고 인내심있는 기여가 없었다면 가능하지 않았을 것이다. 감사합니다! 브레인스토밍과 I land the plane하는 주장에 Alex Chang, 매의 눈을 가진 마이크로소프트의 Bryan Mamaril, 편집 노트의 Jeremey Hansom, 놀라운 UI 모션 지도자가 된 Eric Braff, 몇년간 나를 믿고 따라온 Artefact의 Rob Girling, 애프터 이펙트 학회에서 UI 모션에대한 영감을 주는 Matt Silverman, 멋진 룸메이트이자 UI에 영감을 주는 Bradley Munkowitz, 모션에서 놀라운 글을 쓰는 Pasquale D’Silva, UI 안무(Choreography)에대한 멋진 글의 Rebecca Ussai Henderson, UI와 모션에관한 주제에 멋진 기여를 하는 Adrian Zumbrunnen, 나의 지능적 형재로 항상 나의 수준을 올려주는 Wayne GreenfieldChristian Brodin, 그리고 영감의 gif들을 만들어내고있는 수천의 UI 애니메이터들에게 특별 감사를 전한다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

트랙백  0 , 댓글  0개가 달렸습니다.
secret