오늘날의 인터페이스를 위한 디자인은 서로 연결된 정적 화면 그 이상이다. 또한 디자이너는 종종 사용자 테스트와 같은 활동을 위해 이러한 대화식 흐름을 경험해야 하기 때문에 프로토타입을 만들어 디자인을 구현한다. 그러나 프로토타입을 만드는 과정은 종종 반복적이고 시간이 오래 걸리며 매우 고통스럽다. 특히 디자이너가 Sidebar, Modal 및 Popover와 같은 요소를 모방하기 위해 다른 콘텐츠 위에 콘텐츠를 표시하려는 경우에 특히 그렇다.
오늘 우리는 프로토타입이 피그마(Figma)에서 훨씬 더 재미있어졌다. Figma의 새로운 오버레이(Overlay) 기능을 사용하면 다른 콘텐츠 위에 유연하게 콘텐츠를 표시하고 상호작용하며 여러 오버레이를 열 수 있다.
작동 원리
간단한 오버레이
우리는 오버레이의 기본 전달을 다시 상상해보자. 이제 두 프레임을 연결하기 위해 프로토타입 링크를 추가하면 속성 패널에 새로운 옵션이 표시된다. 이 옵션을 사용하면 대상 프레임을 오버레이로 설정할 수 있다. 일단 선택하면 오버레이 위치와 표시 방법을 사용자 정의할 수 있다.
Figure 1-1 Figma에서 외부 프레임을 사용 오버레이 적용
우리의 상대 위치는 장치와 관련하여 오버레이를 표시하려는 모달 및 작업 시트와 같은 사용 사례를 지원한다. Tooltip 및 Dropdown과 같은 다른 사용 사례의 경우 열려있는 객체와 관련하여 수동으로 배치할 수 있습니다.
다중 오버레이
그러나 우리는 거기서 멈추지 않았다. 점점 더 상호작용하는 세상에서, 2단계 이상의 오버레이가 함께 작동해야 하는 상황이 종종 있다. 다단계 구매 흐름과 확인 대화를 생각해보자. 이때 Figma에서 디자이너는 서로의 위에 여러 오버레이를 추가할 수 있다. 무엇보다도 여러 오버레이를 설정하는 것은 단일 오버레이를 설정하는 것만큼 간단하다.
Figure 1-2 Figma에서 외부 프레임을 다중 사용
오버레이에 대한 상호 작용
프로토타입은 인터랙티브 한 경험이므로 오버레이에서 인터랙션을 허용하는 방법에 대해 신중하게 생각해야 한다. 두 프레임을 연결한 후 프레임을 교체할 수 있다. 스와핑 하면 전체 프레임이 새 프레임으로 교체되지만 오버레이는 해제되지 않는다. 이를 통해 버튼 가리 키기 등의 상호작용을 오버레이에 추가할 수 있다.
Figure 1-3 Figma에서 외부 프레임을 오버레이 사이드 메뉴 적용
다른 핵심적인 세부 사항
이제 레이어 패널에서 이러한 옵션을 선택하는 대신 오버레이 연결을 드래그하면서 캔버스에서 직접 뒤로 또는 닫기를 선택할 수 있다.
키보드 바로 가기(Keyboard shortcut): 대상 프레임을 끌어서 이동하는 동안 옵션 키를 길게 눌러 스왑 연결을 빠르게 선택할 수 있다.
전문가 팁(Pro Tip): 스왑 링크를 활용하면 스왑 링크를 건너뛰어 이전 프레임으로 기본 설정하는 대신 탐색을 사용한 마지막 프레임을 표시하는 보다 유연한 ‘Back’ 작업을 수행할 수 있다.
오버레이가 다른 콘텐츠 위에 유연하게 콘텐츠를 표시하기 위해 모든 사용 사례를 간소화하기를 바란다. 또한 오늘날 상호작용(Interactions), 전환(Transitions), 장치 프레임(Device frames), 고정된 객체(Fixed objects) 및 고급 스크롤(Advanced scrolling)과 같이 Figma에서 이미 액세스 할 수 있는 다른 강력한 프로토 타이핑 기능도 모두 보완한다.
우리의 삶은 색상으로 가득 차 있다. 색상은 의사 결정 과정뿐만 아니라 우리의 기분, 감정 및 인식에 영향을 줄 수 있다. 즉, 색상 조합에서 선택하는 것이 브랜드 및 웹 사이트 구축에 중요한 부분임을 의미한다.
최고의 색상 조합을 선택하는 것은 과학과 예술의 혼합적 가치이다. 우리는 모든 사람들이 색채와 그래픽 디자인의 타고난 능력으로 태어났다는 것을 이해하지 못한다. 운좋게도 최상의 색상 조합을 선택하여 인상을 남기고 원하는 효과를 얻을 수있는 방법이 있다.
기본적인 색상 조합
색상 조합을 선택하기 전에 색상, 용어, 작동 방식, 색상과의 정서적 연결, 사용자가 선택한 색상에 반응하는 방식에서 그들이하는 역할에 대한 기본적인 이해를하는 것이 좋다.
색상 색조의 관계에 대한 시각적 표현 인 색상환을 다시 소개한다.
색상환(Color Wheel)
초등학교로 돌아가거나 Photoshop을 사용하려고 시도한 시점과 관계없이 대부분의 사람은 인생의 어느 시점에서 컬러 휠 버전을 발견한다. 이 도구의 역사는 1700년대 초반으로 거슬러 올라가며 예술가와 디자이너가 꼭 알아야 할 내용이 되었다.
작동 원리
간단한 색상환은 중앙 허브 주위에 12개의 색상으로 구성돼있다.
1차, 2차 및 3차 색상으로 구성된 컬러 휠
모든 색상은 기본 색상(primary colors)의 조합에서 나온다. 세 가지 기본 색상은 빨강, 파랑 및 노랑이다. 이 세 가지 색상은 기본적으로 다른 모든 색상의 기준이된다.
컬러 휠에서 강조 표시된 기본 색상
기본 색상 중 두 가지 색상의 동일한 부분을 혼합하면 2차 색상 또는 보조 색상(secondary colors)이 만들어진다.
빨강(Red) + 파랑(Blue) = 자주색(Purple)
파란색(Blue) + 노란색(Yellow) = 녹색(Green)
빨강(Red) + 노랑(Yellow) = 주황색(Orange)
컬러 휠에서 강조 표시된 보조 색상
3차 색상(Tertiary colors)은 기본 색상(primary colors) 중 하나와 가장 가까운 2차 색상 중 하나를 혼합 한 색상이다. 3차 색상은 모든 기본 색상과 2차 색상 사이에 있다.
빨강색(Red) + 주황색(Orange) = 빨강 주황색(Red-orange)
노랑색(Yellow) + 주황색(Orange) = 노랑 주황색(Yellow-orange)
노랑색(Yellow) + 녹색(Green) = 노랑 녹색(Yellow-green)
파랑색(Blue) + 녹색(Green) = 파랑 녹색(Blue-green)
파랑색(Blue) + 자주색(Purple) = 파랑 자주색(Blue-purple)
빨강색(Red) + 자주색(Purple) = 빨강 자주색(Red-purple)
컬러 휠에서 강조된 3차 색상
Terminology
모든 연구 분야와 마찬가지로 예술, 디자인 및 색상의 세계는 기술적 인 언어로 잘 표현되어 있다. 컬러 용어에 대한 전반적인 이해는 비즈니스의 미래에 도움이 될 것이다. 디자인 분야에서 가장 많이 사용되는 기본 용어를 소개한다.
색상환의 확장 : 색상 구. 중심 또는 극에 가장 가까운 색상이 가장 무채색 이다. 밝기와 채도가 같지만 색조가 다른 색상을 뉘앙스 라고 한다. 색조와 채도가 같지만 밝기가 다른 색상을 색조와 음영 이라고 한다. 색조와 밝기는 같지만 채도가 다른 색상을 톤 이라고 한다.
색상(Hue, 色相) – “색상(Color)” 및 “색조(色調, Hue)”라는 용어는 종종 아티스트와 디자이너가 서로 바꿔서 사용할 수 있다. 모든 의도와 목적에 따라 이 방법을 사용할 수 있지만 “색상(Color)”과 “색조(Hue)”라는 단어는 실제로 다른 것을 의미한다. 일반적으로 “Color”는 검은색, 흰색 및 회색을 포함한 모든 색상을 나타내는 데 사용된다. “Hue”는 우리가 보는 색상의 원점을 나타낸다. 그것은 우리가 보는 색의 기본이며 항상 컬러 휠의 6가지 기본 및 보조 색상 중 하나이다. 다시말하면 색상환에서 볼 수 있는 순수하고 채도가 있는 색을 일컫는다.
명색조(Tint) – “Tint”는 주어진 색상의 밝은 버전이다. 흰색만 추가 된 색상이다. 때로는 색조가 원래 색상보다 밝게 보일 수 있지만 단지 창백한 버전이 아니기 때문이다. 색조는 원색보다 약간 밝은 색상에서 많이 밝은 색상으로 거의 흰색에 이르기까지 다양하며, 종종 해당 색의 채도가 있는 색보다 훨씬 더 차분하다.
암색조(Shade, 음영) – 이것은“Tint”의 반대 개념이다. “음영(shade)”은 검은색만 추가 된 색조이다. 물론 다양한 양의 검은 색을 포함 할 수 있으며, 결과 색상이 원래 색조보다 거의 어둡거나 거의 검은 색일 수 있다. 이것을 기억하는 쉬운 방법은 나무 그늘의 잔디가 태양의 잔디보다 어둡게 보이는 생각을 하게 되면 된다.
톤(Tone) –“Tint” 및 “Shade”과 매우 유사하다. 흰색 또는 검은색이 추가된 색조가 아니라 회색(Grey)만 추가된 색조이다. “톤”을 만들기 위해 추가된 회색은 다른 색이 아닌 흑백으로만 구성되어야 한다(회색으로 간주하는 많은 색상은 실제로 색상을 기본으로 가짐). 톤 색상은 순수한 색조보다 더 정교해 보인다.
채도(saturation) – 색의 전체적인 강도나 색상의 선명한 정도를 의미한다. 순수한 색상은 그 색상의 명색조나 톤보다 더 진하다.
명도(value) – 색의 일반적인 밝기나 어둡기를 나타낸다. 밝은 색상은 어두운 색상보다 더 명도가 더 높다.
따뜻함(Warm)과 차가움(Cool) – “따뜻한” 색상은 열과 유사하거나 상징적인 색상이며 “차가운” 색상은 얼음과 차가운 온도로 인한 것이다. 예를 들어 빨강, 주황, 노랑 및 빨강-보라색은 따뜻한 색상이고 파랑, 자주색, 녹색 및 파랑-녹색은 시원한 색상이다.
색의 심리학
색상 이론을 소개했으므로 색상의 심리를 빠르게 살펴 봐야 한다. 선택한 색상과 색조는 고객이 웹 사이트, 명함 및 / 또는 사무실 공간에 대해 어떻게 느끼는지에 따라 색조를 설정하기 때문에 중요하다. 색상 조합을 선택하는 것은 원하는 색상을 선택하는 것이 아니라 청중이 찾는 감정을 불러일으키는 색상을 선택하는 것이다.
“색은 영혼에 직접 영향을 미치는 힘이다.” “Color is a power which directly influences the soul.”
따뜻한 색은 에너지와 흥분과 열정을 불러일으키고 시원한 색은 차분하고 긴장을 풀 수 있게 한다.
이제 우리는 예술과 디자인에 적용되는 색상에 대한 이해를 하게 될것이다.
Color Combinations – 색상 조합
함께 어울리는 색상을 쉽게 선택할 수 있다. 컬러 휠을 사용하여 단색, 보색, 유사, 분할, 트라이어드 또는 4차 색상 조합을 선택할 수 있다. 이 다양한 색 구성표는 원하는 효과에 따라 대비되는 색상과 조화로운 색상 중에서 선택할 수 있는 옵션을 제공한다.
Monochrome Combinations – 흑백 조합
단색 색상 조합은 단일 색조의 다른 변형 방법이다. 이 조합은 선택한 색상의 색조, 음영 및 색조로 구성된다. (예를 들어 : 진한 파란색, 약간 밝은 파란색 및 밝은 파란색) 이러한 조합은 바쁜 디자인을 단순화하고 조화롭고 시각적으로 매력적인 모양을 만들거나 브랜드를 특정 색상으로 식별하려는 경우에 좋다. 계층화된 가격표와 같은 디자인의 진행 상황을 보여 주거나 더 밝은 색상을 사용하여 더욱 세련된 디자인을 만드는 것도 좋은 방법이다.
Complementary Combinations – 보완 조합
보색은 컬러 휠에서 서로 마주 보는 반대편에 존재한다. 이 색상은 서로 대비가 높으며 잘못 사용하면 시각적으로 매우 왜곡될 수 있다. 잘 사용하면 디자인을 대담하게 만들 수 있다.
일반적으로 보색을 사용할 때 디자인에서 동일하게 사용하고 싶지 않을 수 있다. 색조 중 하나를 기본 색상으로 선택한 다음 보완 색상을 사용하여 특정 중요한 항목을 강조 표시 할 수 있다.
이러한 대조적인 색 구성표는 자연에서도 발견될 수 있으며 생생하면서도 자연스럽고 디자인 적용에 적합하다. 예를 들어, 바다의 푸른색에 돋보이는 주황색 산호, 또는 잎의 부드러운 초록색에 라벤더가 있다.
보색(complementary color) 조합의 예 :
빨강과 녹색(Red and green)
파랑과 주황색(Blue and orange)
노란색과 보라색(Yellow and purple)
황록색과 적자(Yellow-green and red-purple)
빨강 주황색과 청록색(Red-orange and blue-green)
보색의 관계
위의 보완 조합의 예는 파란색과 주황색이다. 컬러 휠에서 서로 직접 교차하는 방법을 확인해보자.
Analogous Combinations – 유사한 조합
이러한 색상 조합은 색상환에 나란히 직접 배치된다. 이 조화는 평온과 평화를 느끼게 한다. 어떤 사람들은 이것이 자연계에 자주 존재하는 유사한 조합 때문이라고 말하기도 한다. 기본 색상을 선택한 다음 강조 표시할 색상 (보통 2차 및 3차 색상)을 두 개 더 선택하는 것이 좋다. 기본 색상이 우세하고 다른 두 색상이 압도적으로 강조 표시되도록 하자. 또한 혼합되어 디자인을 씻어 낼 수 있음으로 밀접한 색상을 선택해야 할 때도 있다.
유사한(analogous) 조합의 예 :
보라색, 파란색 및 청록색(Violet, blue, and teal)
빨강, 자홍색 및 자주색(Red, fuschia, and purple)
빨강, 주황 및 노랑(Red, orange, and yellow)
녹색, 파란색 및 자주색(Green, blue, and purple)
유사색상의 관계
Split Complementary Combinations – 분할 보완 조합
이것은 보완적인 색 구성표의 변형이다. 그러나 두 색상이 서로 직접 가로지르는 대신 보색의 양쪽에 하나의 색상이 포함된다. 이 구성표는 너무 굵게 표시되지 않고 세 가지 색상을 포함하여 보색 구성표보다 다양한 색상을 추가한다. 이 방법을 사용하면 보색 구성표보다 균형이 잘 잡힌 따뜻한 색조와 차가운 색조가 모두 포함된 조합으로 마무리된다.
분할 보완 색상 구성표(split complementary color schemes)의 예 :
빨강, 청록색 및 황록색(Red, blue-green, and yellow-green)
파랑, 빨강 주황 및 노랑 주황(Blue, red-orange, and yellow-orange)
노랑, 파랑-보라색, 빨강-보라색(Yellow, blue-purple, and red-purple)
퍼플, 옐로우-오렌지, 옐로우-그린(Purple, yellow-orange, and yellow-green)
분할 보완 색상 관계
Triadic Combinations – 삼원 조합
이 간단한 색상 콤보는 분할 보완 색상 구성표의 변형이다. 이 컴포지션의 색상은 색상환에서 동일한 간격으로 나타난다. 정삼각형을 컬러 휠에 배치하는 것과 같다. 각 지점의 색상은 3색 조합을 만들기 위해 함께 제공된다.
이러한 색상 조합은 톤을 내리거나 색조를 주거나 음영을 입었을 때도 매우 생동감 있는 경향이 있다. 색상은 장난기나 청소년기처럼 보일 수 있다. 이 때문에 이러한 색상의 균형에 주의해야 한다. 하나를 기본 색상으로 선택하고 다른 두 가지를 악센트로 사용하는 것은 시작하기에 적절한 방법이다.
삼원(triadic) 조합의 예 :
빨강, 노랑, 파랑(Red, yellow, and blue)
자주색, 녹색 및 주황색(Purple, green, and orange)
청 자주색, 적황색, 황록색(Blue-purple, red-orange, and yellow-green)
3원 조합의 예
Tetradic Combinations – 4차 조합
3색 조합과 마찬가지로 4색 조합은 색상이 콤보 3개 대신 4개의 색상을 사용한다는 점을 제외하고 동일한 거리에 있는 색상을 포함한다. 색상환에 사각형을 배치하고 각 모서리에서 색상을 선택하여 4색 조합을 얻거나 2개의 보완 색상 세트를 선택할 수 있다.
이 색상 조합은 항상 시끄럽고 재미있으며 생동감 있는 디자인으로 두드러지게 된다. 그러나 이러한 조합이 압도적일 수 있음으로 이러한 조합과 균형을 찾는데 주의를 기울여야 한다.
4차 색 구성표(tetradic color schemes)의 예 :
빨강, 초록, 파랑-보라색, 노랑-오렌지(Red, green, blue-purple, and yellow-orange)
노랑, 자주색, 청록색 및 빨강 주황색(Yellow, purple, blue-green, and red-orange)
4차 색 구성표
색상으로부터 자유로워지려면 – 실험이 핵심이다.
예술과 디자인에 대한 친근감이나 배경이 없다면 최상의 색상 조합을 선택하는 것이 때로는 압도적일 수 있다. 선택한 색상 조합을 실제로 적용할 때까지 디자인에서 어떤 색상 조합이 표시되는지 알 수 없다. 그렇기 때문에 다양한 Hues, Tones, Tints 및 Shade 스캔을 실험하면 목적과 의도에 가장 적합한 색상 조합을 찾는 데 도움이 된다. 그리고 당신이 원하는 메시지와 느낌을 전달하도록 도와준다.
의사 결정 과정에 도움이 되는 많은 앱과 웹 사이트가 있다. Canva의 컬러 팔레트 생성기는 좋아하는 사진을 끌어다 놓아 컬러 팔레트를 검색 할 수 있다.
여러분의 웹 사이트, 명함 또는 사무실에 맞는 색 구성표를 찾고 있더라도 여러분의 요구에 가장 적합한 색상 조합을 개발할 수 있음을 확신한다.
새로운 프로젝트가 시작될 때 개발자들은 디자인에서 다루게 될 문제를 확인해야 한다. 이 단계는 나머지 설계 프로세스에 알리고 성공의 측정 방법을 정의하기 때문에 중요하다. 이 책에 제시된 시나리오는 다양하다. 물 샘플을 안전하게 여과하는 것과 같이 해결해야 할 문제가 있다. 다른 사람들은 개발자들이 방에서 전등 스위치를 가져올 수 있는 장치를 만드는 것과 같은 기존 디자인을 개선하는 데 중점을 둔다. 소수는 실제로 개념적이다. 예를 들어 개발자들은 환경에 미치는 영향을 관찰하기 위해 실제 댐을 설계하고 물의 흐름을 실험할 수 없다. 이와 같은 활동의 목적은 개발자들이 기본적인 디자인 개념을 이해하고 이러한 개념을 다른 문제 나 과제에 적용하는 것을 돕기 위한 것이다.
연구 조사(Research)
문제가 확인되면 개발자들은 조사를 시행한다. 이 연구에는 개발자의 아이디어를 공식화하고 디자인에 대한 제약 조건을 인식하는 것을 돕기 위해 책, 잡지 또는 인터넷에서 기사를 찾는 것이 포함될 수 있다. 이 단계에서 개발자는 기존 디자인을 검토하여 시작 장소를 제공하고 개발자가 질문을 공식 작성하도록 도울 수 있다. 연구는 개발자들이 디자인의 중요한 요소를 발견하고 탐색하는 단계이기도 하다. 유도된 질문은 성공적인 디자인을 개발하기 위해 해결해야 하는 문제의 측면에 대한 비판적인 사고를 장려한다.
각 활동에서 연구 단계에는 질문 : 설계 제약 조건은 무엇인지? 이 질문은 개발자들이 솔루션의 한계를 인식하고 비효율적이거나 비용이 많이 드는 또는 물리적으로 불가능한 솔루션을 제거하는 데 도움이 된다.
가능한 솔루션 개발(Develop Possible Solutions)
다음으로, 개발자들은 자신이 식별 한 문제를 해결할 수 있는 가능한 설계 솔루션을 브레인스토밍 한다. 가능한 해결책은 동일하거나 다른 재료를 사용하는 한 디자인의 변형을 포함할 수 있다. 또한 완전히 다른 디자인을 포함할 수도 있다. 이 단계에서는 개발자들이 각 디자인의 장단점을 인식할 수 있다.
하나의 솔루션 선택(Choose One Solution)
이 단계에서 개발자들은 제안된 디자인 중 하나를 선택하고 자세히 설명한다. 그들은 자신의 디자인을 그리거나 그려 내기 위해 왜 그들이 그것을 선택했는지 설명해야 할 것이다. 각 가능한 솔루션에 대해 최대한 많은 정보를 갖고 문제 또는 작업을 염두에 두면 성공적인 설계를 선택하는 데 도움이 된다. 선택한 디자인은 개발자들이 가장 필요하다고 생각하는 해결책을 나타내야 하거나 디자인 과정 초기에 확인된 문제를 해결해야 한다.
프로토타입 설계 및 구축(Design and Construct a Prototype)
디자인 프로세스의 이 시점에서 개발자들은 자료를 수집하고 프로토타입을 작성하며 복제에 필요한 설계의 특정 세부 사항을 기록한다. 치수, 측정, 재료, 공정 등과 같은 요구 사항은 상세한 설명이나 평가에 설명되어 있다. 프로토타입을 연구하거나 복제하는 사람이 알아야 할 사항은 이 섹션에 포함되어야 한다. 이 단계가 끝나면 개발자들은 테스트 준비가 된 프로토타입을 갖게 된다.
정의에 따르면 프로토타입은 원래 기본 모델이다. 이 개념은 개발자들이 설계 과정을 이해하고 성공한 프로토타입이 반드시 문제가 없는 것은 아니라는 사실이 중요하다. 과학자들은 일반적으로 프로토타입을 여러 번 변경하여 원하는 대로 할 수 있다.
프로토타입 테스트(Test the Prototype)
프로토타입을 제작한 후 개발자들은 그것을 테스트할 것이다. 일부 활동은 개발 기간 내에 테스트할 수 있는 프로토타입을 생성한다. 다른 것들은 며칠의 테스트를 필요로 한다. 개발자들은 그래프나 표를 만들거나 다른 방법으로 결과를 기록하도록 요청받을 수 있다. 프로토타입을 테스트하는 것은 일반적으로 관측에 기반한 질문을 하고 문제 또는 작업이 얼마나 잘 해결되는지 평가하여 프로토타입을 평가하는 것이다. 성공적인 프로토타입은 완벽한 프로토타입이 아니라 디자이너가 자신의 디자인을 수정하는 데 도움이 되는 것을 이해하는 것이 중요하다.
결과 전달(Communicate Results)
결과 공유는 개발 중인 설계에서 중요한 단계이다. 개발자들은 결과를 전달하기 위해 다양한 방법을 사용하는 것이 좋다. 예로는 스케치, 사진, 상세한 다이어그램, 단어 설명, 포트폴리오, 컴퓨터 시뮬레이션, 컴퓨터 슬라이드쇼 및 비디오 프레젠테이션이 포함된다.
또한 프로토타입을 테스트할 때 수집된 증거를 제시할 수 있다. 이 증거에는 선택된 설계를 지원하는 그래프 및 데이터 테이블과 같은 수학적 표현이 포함될 수 있다. 개발자들은 특정 솔루션이 얼마나 효과가 있었는지에 관해 이야기하고 다른 개발자들이 문제에 접근하는 방법을 배울 수 있다.
개발자들이 이 단계가 경쟁이 아니라는 사실을 이해하는 것이 중요하다. 실험이나 테스트의 결과를 전달하는 것은 과학자와 엔지니어에게 실용적이고 도덕적으로 중요하다. 실질적으로 의사소통 결과는 다른 과학자 또는 엔지니어가 제안을 하고 디자인을 개선하는 데 도움이 되는 대화를 시작한다. 또한 이 설계는 다른 엔지니어가 자신의 설계로 인해 발생한 문제를 해결하거나 새로운 설계로 영향을 줄 수 있다. 윤리적인 의사소통 결과는 정확하고 공정한 평가를 위한 실험 또는 디자인을 만든다. 또한 설계를 공유하는 과학자 또는 엔지니어의 지적 재산권을 보호하는데도 도움이 된다.
평가 및 재설계(Evaluate and Redesign)
마지막 단계는 개발자들이 자신의 디자인에 대해 효과가 있었고 효과가 없었던 이유와 그 이유를 평가할 수 있게 한다. 개발자들은 디자인 제약 조건을 가지고 프로토타입 디자인을 평가해야 한다. 개발자들은 등급에 관해 설명하고 필요할 경우 디자인 개선에 대해 의견을 나눌 것을 권장한다. 일부 활동을 통해 개발자들은 프로토타입을 다시 디자인할 수 있지만, 시간과 재료의 제약으로 인해 다른 활동에서는 개발자들만 토의에 참여한다.
버튼은 모든 인터페이스에서 찾을 수 있는 요소로 사용자가 조치를 취하고 선택을 할 수 있게 해준다.
그들이 볼 수 있는 것처럼 간단하게 잘 설계된 버튼을 전달하기 위해 따라야 할 규칙이 있다.
이 글에서는 잘 디자인된 버튼을 위해 따라야 할 기본 규칙을 설명할 것이다.
버튼 유형(Buttons Types)
일반적으로 모든 인터페이스에는 사용자 경험을 향상시키기 위해 하나 이상의 버튼 유형이 포함되어 있다. 버튼 유형은 사용자가 중요성과 그 사이의 차이를 만드는 데 도움을 주며, 다른 버튼 유형은 덜 관심을 끌 수 있다.
버튼 해부학(Buttons Anatomy)
버튼 디자인을 시작하기 전에 해부학을 이해해야 한다. 해부학은 사용자의 언어에 따라 구조를 따르는 것이 좋지만 영어가 왼쪽에서 오른쪽으로 작성되므로 아이콘이 먼저 나오고 텍스트가 온다.
버튼 크기(Button size)
여기에 있는 아이디어는 버튼을 모바일 사용자에게 손가락 친화적으로 만들고 PC에서 클릭할 수 있게 하는 것이다. 이 경우 항상 버튼을 누르고 그 근처에 있는 버튼을 눌러야 한다. 여기서 우리는 잘못 설계된 버튼을 직면하고 있다. 또한 버튼이 클수록 우선순위가 높아진다.
색상 및 대비(Color & Contrast)
다른 색상의 버튼은 부트스트랩에서 왔으며 요즘에는 주로 기본 및 보조 버튼을 사용하므로 다른 색상을 사용할 필요가 없지만 버튼의 메시지가 색상을 사용하는 인터페이스보다 더 중요한 대시보드 또는 인터페이스와 같은 인터페이스에서는 문제가 없다.
너비와 안쪽 여백(Width and Padding)
이것에 대한 규칙이나 완벽한 숫자는 없지만 이 예를 보면 비율에 대한 아이디어를 얻을 수 있다.
버튼 간격(Button spacing)
버튼 간격은 특히 휴대 기기에서 특히 중요하다. 이 연구에 따르면, 고령자를 위한 터치스크린 사용자 인터페이스: 버튼 크기 및 간격 버튼이 너무 멀리 떨어져 있으면 사용자가 터치 대상으로 이동하는 속도가 훨씬 느려진다. 또한 버튼이 너무 가까웠을 때 사용자가 터치 정확도가 가장 낮다.
버튼 상태(Button States)
상태는 구성 요소의 상태를 통신하는 데 사용된다. 잘 설계된 버튼은 사용자가 상호 작용할 때 상태를 변경해야 한다. 잘못 설계된 버튼은 잘못된 동작을 오도할 수 있으며, 예를 들어 필드가 버튼처럼 설계된 경우 다른 동작으로 착각할 수도 있다.
게재 위치 및 주문(Placement & Order)
일반적으로 버튼은 중요한 순서대로 배치된다. 게다가, 이 글의 좋은 예가 로그인 폼이다. 로그인 버튼이 가장 주목을 받고 나서, 덜 중요한 액션에 일반적으로 사용되는 텍스트 버튼이 있다.
미세먼지(微細-, 영어: particulate matter, PM, suspended particulate matter, SPM, atmospheric aerosol particles, atmospheric particulate matter) 또는 분진(粉塵)은 눈에 보이지 않을 정도로 입자가 작은 먼지이다. 아황산가스, 질소 산화물, 납, 오존, 일산화탄소 등을 포함하는 대기오염 물질로 자동차, 공장 등에서 발생하여 대기 중 장기간 떠다니는 입경 10μm 이하의 미세한 먼지이며, PM10이라고도 한다. 입자가 2.5μm 이하인 경우는 PM 2.5라고 쓰며 ‘초미세먼지’ 또는 ‘극미세먼지’라고도 부른다. 학술적으로는 에어로졸(aerosol)이라고 부른다. 미세먼지(fine particles)는 부유분진(Suspended particles), 입자상 물질(Particulate matter) 등으로도 불리며 명칭에 따라 약간씩 다른 의미를 가지고 있다. 입자상 물질은 지름이 100μm에서 10nm정도이며, 이보다 지름이 크면 중력으로 인해 대기 중 체류시간이 아주 짧다
개요
인체에 큰 영향을 미치는 물질이다. 1948년 미국 펜실베이니아주 도노라에서 20명이 사망한 대기오염사고, 1952년 약 4,100명의 사망자를 발생시킨 런던 스모그는 미세먼지가 인체에 어떤 영향을 미치는지 보여 주는 대표적인 사례이다. 그 이후로 미세먼지가 인체에 미치는 영향에 대한 다양한 역학조사가 실시되었고, 특히 10μm 이하의 미세먼지 입자(PM10)가 취약집단의 질병 발생률과 사망률을 높이는 등 인체에 해로운 영향을 미칠 가능성이 높다는 것이 밝혀졌다. 이후 각 국에서 대기오염 대책이 마련되었으며, 미세먼지가 인체와 환경에 미치는 해로운 영향을 줄이기 위해 대기오염 기준도 마련하였다. 미세먼지는 입자의 크기에 따라 50µm 이하인 총먼지(TPS, TOTAL SUSPENDED PARTICLES)와 입자 크기가 매우 작은 미세먼지로 구분한다. 미세먼지는 지름이 10µm 보다 작은 미세먼지(PM10)와 지름이 2.5µm 보다 작은 미세먼지(PM2.5)로 나뉜다.
공기 속에 입자상 물질(고체나 액체상태)이 부유하고 있는 상태를 일반적으로 에어로졸(Aerosol)이라 한다. 통상적으로 먼지라 말하고 있다. (위키피디아 참고)
미국 유타에서 UX 매니저로 일하고 있는 Taylor Palmer(https://twitter.com/_taylorpalmer)가 진행한 조사이며, 전 세계 대상 약 2800여 명 디자이너들에 관한 설문 결과이다. 설문에서 정의하는 디자인 툴은 UX Design 관련 툴들이며, 응답자의 절대다수 또한 디지털 디자인 (웹/앱 디자인) 쪽에서 일하는 디자이너들이다.
총 11개 분야로 설문이 진행되었으며, 분야별로 가장 많이 사용하고 있는 툴에 대해 간접적으로 파악할 수 있는 결과라고 생각된다. 본 데이터는 국내에서의 현황과는 상이하지 않을 수 있음을 참고 바란다.
스케치가 많은 부분에서 1위를 차지했지만, 피그마(https://www.figma.com/)의 약진이 돋보이는 결과였으며, 많은 분야에서 스케치 다음가는 순위를 보였다. Adobe XD는 피그마(Figma)보다 비슷하거나 낮은 투표를 기록했다. (프로토타이핑 툴 분야 제외)
‘브랜드 경험(Brand Experience) 디자인’이란 말 그대로 다양한 소비자에게 브랜드를 경험하게 해 주고 인지시켜, 자연스럽게 그 브랜드의 이미지를 연상시켜 줄 수 있는 시각적 디자인과 경험을 위한 디자인을 통칭한다고 볼 수 있다.
아이덴티티 디자인은 회사나 브랜드의 정체성을 보여주는 얼굴과 같다. 그 안에는 회사나 브랜드가 쌓아온 역사와 야망, 그리고 시대의 흐름이 담겨 있다. 그래서 아이덴티티 디자인에게 변화란 운명과도 같은 것. 회사 주인이 바뀌고, 그들의 어젠다가 바뀌고, 시대의 유행과 기술의 변혁으로 패러다임이 바뀌면 아이덴티티 디자인도 그 뒤를 바짝 쫓아야 한다. 아이덴티티 디자인은 그 대상이 누구인지 보여주는 가장 확실한 방법이기 때문이다. 그러나 어떤 때는 완전히 새로 만드는 것보다 고치는 게 힘들 때가 있다. 아이덴티티 디자인을 리뉴얼하는 것은 후자에 가깝다. 목적과 기능이 뚜렷하고 준비가 잘된 상태에서 새 출발하는 경우라면 모를까, 대부분 경우의 수가 복잡하기 때문이다.
Brand / 브랜드
Brand / 브랜드
“브랜드란 기업이 시장에서 소비자들에게 어필하기 위한 차별화된 철학이다.”
Brand Value / 브랜드 가치
Brand Value / 브랜드 가치
“브랜드 가치는 기업이 소비자에게 제공하고자 하는 약속과 소비자가 느끼는 기대치에 의해 결정된다.”
Brand Design / 브랜드 디자인
Brand Design / 브랜드 디자인
“브랜드 디자인은 브랜드를 만들어 나가는 과정으로, 계획 수립을 통해 브랜드의 비전을 만들고, 비전을 성사시키기 위한 디자인을 수행하며, 브랜드의 가치를 만들고 지켜 나갈 수 있는 관리를 하는 모든 과정을 종합적으로 디자인하는 작업이다. 브랜드 아이덴티티 디자인은 브랜드 디자인의 일부일 뿐 브랜드 디자인 전체를 가리키는 말이 아니다.”
Brand Identity Design / 브랜드 아이덴티티 디자인
Brand Identity Design / 브랜드 아이덴티티 디자인
“브랜드 아이덴티티 디자인은 브랜드가 소비자에게 전달하고자 하는 브랜드 콘셉트를 소비자에게 가장 효과적으로 전달할 수 있도록 디자인한 결과물이다. 브랜드 아이덴티티는 오감을 이용한 다양한 방법으로 표현할 수 있다.”
Brand Storytelling / 브랜드 스토리텔링
Brand Storytelling / 브랜드 스토리텔링
“브랜드 스토리텔링은 브랜드가 전하고자 하는 핵심 메시지를 이야기라는 형식을 통해 전달하는 것을 말한다. 왜(Why), 누가(Who), 무엇을(What), 어떻게(How) 브랜드를 만들었는지에 대한 이야기를 동기, 주체, 목적, 방법에 대한 내용을 주로 기승전결 방식으로 풀어내어 소비자로 하여금 브랜드에 대한 관심과 설득력을 갖게 한다. 훌륭한 브랜드 스토리텔링은 타 브랜드와의 차이를 명확하게 하고 호기심과 특유의 감성을 불러일으킨다.”
Brand Touch Point / 브랜드 터치 포인트
Brand Touch Point / 브랜드 터치 포인트
“브랜드 터치 포인트는 브랜드와 소비자가 만나는 접점이다. 사용 경험, 소문, 광고, 패키지, SNS, 블로그, 웹 사이트 등 양방향 소통을 통한 공감대를 형성한다. 브랜드 터치 포인트는 브랜드의 제품 출시 전부터 판매, 사후 관리를 총망라하는 것으로서 브랜드와 소비자 사이의 신뢰, 충성심, 재구매, 인지도 상승효과를 불러일으킨다.”
제플린(Zeplin)은 공동 작업을 위한 웹과 데스크톱을 모두 지원하는 프로그램이다. 스케치(Sketch), 어도비 XD CC, Photoshop CC, 피그마(Figma) 등과 연동하여 자동으로 작업한 결과물을 Asset 생성, 좌표값, Color Palette를 스타일 가이드로 생성해 준다.
과거 Assistor PS를 사용하여 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt 문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나는 추세다.
제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해준다.
Sketch 디자인에서 Zeplin으로 아트 보드를 내보내는 것은 아주 간단하다. 디자인 결과물을 내보낼 수 있으려면 데스크톱 응용 프로그램을 다운로드해야 한다. 스케치 파일에서 레이어 / 아트보드를 선택하고 ^⌘E을 누르거나 상단의 “플러그인> Zeplin> 선택된 아트보드 내보내기… “메뉴를 사용하여 내보내기 프로세스를 시작하면 된다.
얼마 전 Zeplin의 새로운 Adobe XD CC 인터그레이션을 시작했다. 그 이후로 수십만 건의 디자인이 Adobe XD에서 Zeplin으로 내 보내졌다고 한다. 프로토타이핑 링크 및 그리드 내보내기와 같은 기능을 추가하여 인터그레이션 기능이 개선이 되었다고 한다. 현재 Mac/Windows 모두 지원하고 있다.
웹사이트 기획 단계에서 가장 핵심 사항은 사용자의 요구와 기업의 목표의 교차점을 찾아내는 것이다. 기업이 웹사이트를 통해서 바라는 목표( 판매, 고객 전환, 회원 가입 등)를 확실히 하고, 타깃 오디언스와의 인터뷰나 조사를 통해 사용자의 만족도, 불편한 지점을 확인하는 것이 선행되어야 한다. 디자인을 바꾸면 웹사이트가 확 좋아질 거라고 기대하고 “look & feel”에 초점을 맞추고 진행하는 경우가 있는데, 종종 문제점은 디자인이 아닌 경우가 많아서 디자인을 바꾼다고 원래의 문제가 해결되지는 않는다.
