챕터1_피그마 활용 심화_2

반응형과 적응형

* 해상도에 맞게 움직이는 유동적인 디자인

• 우리가 다루는 디자인은 데스크탑부터 모바일까지 화면의 크기가 다양하다.
• 따라서 디자인도 화면의 크기에 대응해서 레이아웃이 달라야 한다.
• 해상도에 따라 레이아웃을 변경하는 방법은 대표적으로 반응형 디자인과 적응형 디자인이 있다.

* 반응형 디자인과 적응형 디자인

• 반응형 디자인
  • 반응형 디자인은 말 그대로 반응하는 디자인이다.
  • 해상도의 변화에 실시간으로 반응한다.
  • 반응(Respond)한다고 해서, 반응형은 영어로 Responsive라고 부른다.
• 적응형 디자인
  • 적응형 디자인은 적응하면 움직이지 않은 고정된 디자인이다.
  • 해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않는다.
  • 적응(Adapt)한다고 해서, 적응형은 영어로 Adaptive라고 한다.
• 반응형과 적응형의 차이 및 특징
  📌 반응형과 적응형의 가장 큰 특징은 변화의 과정이 실시간인지 아닌지다.
  • 적응형 디자인 : 해상도가 변해도 디자인은 이미 처음 해상도에 적응한 상태이다.
  • 반응형 디자인 : 해상도가 변하면 디자인이 실시간으로 반응한다.
• 디자인을 브라우저에 띄울 때의 차이
  • 반응형 디자인은 하나의 디자인을 놓고, 화면 크기의 움직임음 감지해서 실시간으로 반응한다.
  • 적응형 디자인은 디자인을 처음 화면에 띄울 때, 화면의 크기를 감지해서 정해진 디자인만 보여준다.

💡 모든 웹사이트가 반응형 도는 적응형으로 딱 나뉘어지진 않움. 대부분의 서비스들은 필요에 다라 두가지를 섞어서 사용하는 것이 일반적이다.

• 반응형 웹사이트 그리드 만들기
  • 실습

정보구조도와 플로우 차트

* 기획을 디자인으로 옮기는 방법

• 우리가 만들어야 할 기능이나 제품의 방향을 정했다면, 이제 본격적으로 디자인과 개발을 하기 위한 작업들을 진행하게 된다.
• 먼저 전체적인 개요와 흐름을 정리하면서, 개발자-디자이너기획자 간 이해도를 동일하게 맞춘다.
• 일반적으로 정보구조도(Information Architecture)와 화면흐름도(Flowchart)를 만든다.

* 정보구조도와 플로우차트의 차이

• 정보구조도와 플로우차트는 유사해보이지만 개념과 목적에 큰 차이가 있다.
• 제품을 하나의 건물로 비유한다면 IA는 층별 안내도, 플로우 차트는 오시는 길이라고 할 수 있다.

* 정보구조도

💡 전체적인 제품의 구성과 각 화면들의 관계를 파악할 수 있다.

• 정보 구조도의 영문 앞글자를 따서 IA로 부르기로 한다.
• 화면과 정보들이 어떤 구조로 연결 있는지를 나타내는 일종의 설계도 라고 할 수 있다.
• 제품을 건물이라고 생각했을 때 IA는 층별안내도라고 할 수 있어요.

* 화면흐름도(Flowchart)

💡 실제로 사용자가 어떤 과정을 통해 제품을 사용하는지 시각적으로 확인할수 있다.

• 화면흐름도는 플로우차트라는 이름으로 더 많이 쓴다.
  • 유저플로우나 유즈케이스라고 부르를 경우도 있다.
• 사용자가 어떤 과정으로 제품을 이용하는지 시각적으로 정리한 순서도라고 할 수 있다.
• 제품을 건물이라고 생각했을 때 플로우차느는 오시는 길이라고 할 수 있다.

📌 와이어프레임과 프로토타입을 만들기 위해서는 사용자 시나리오가 필요해요. 이 사용자 시나리오를 만들기 위해 정보구조도를 작성하고 플로우차트를 만들다고 생각하세요.

와이어프레임

* 와이어프레임의 개념

👉🏻 화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만드는 것을 뜻한다.

• 와이어프레임은 말 그대로 선(와이어)으로 그려진 화면이라는 뜻이다.
• 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적으로 디자인을 하기 전에 주로 하게 된다.
• 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 라고 부를 때도 있다.

* 와이어프레임을 만드는 이유

🧑🏻‍🧑🏻‍🧒🏻 팀원 강의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.

• 글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있다. 아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있다.

🎨 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.

• 처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 잡중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 힘들다. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있다.

🌟 습관 형성 모델을 반복적으로 실험해 볼 수 있다.

• 와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문이다. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 빠르게 검증해 볼 수 있다.

* 와이어프레임 그리는 법

• 와이어 프레임의 목적은 효율적인인 커뮤니케이션과 일관된 디자인 방향이에요. 최소한의 가독성만 확복하고 서로 이해할 수만 있다면 어떤 방식을 사용해도 좋아요.
• 와이어프레임 규칙 정하기
• 그리고자 하는 화면 스케치하기
• 화면을 선으로 연결하기
  • 화면을 선으로 연결하는 이유
    • 와이어프레임으로 만든 화면들을 선으로 연결하는 이유는 화면들이 어떤 관계로 이어져 있는지 파악하기 위함이다. 디자인과 레이아웃을 단순하게 만들어 각 화면들이 어떻게 연결되어 있는지, 이화면에서 저 화면으로 이동하려면 어떤 동작을 하게 되는지도 알기 쉽도록 선으로 연결하는 것.
    • 플로그인 소개 : Simpleflow (14일간 무료) : 프레임끼리 선으로 연결할 수 있는 플러그인.

* 1주차 숙제

• 제출할 곳이 없다 ^.^ 그래서 일단 보류!

---

🥰 Blah Blah

정보구조도와 플로우차트는 그동안 기획자에게 받기만 했는데, 요즘은 디자이너가 함께 하는 모양이다. 내가 알던 R&R이 바뀌어 가고 있다. 엉엉. 이렇게 빨리 변화하는 IT업계에서 난 잘 살아남을 수 있을까 걱정이 이만저만 흙흙모래모래자갈자갈....