N-Screen을 고려한 UI 제작 가이드 - 1. 반응형 웹디자인과 그리드시스템

플립커뮤니케이션즈 스마트미디어그룹에서는 2011년부터 핫 이슈였던 반응형 웹 디자인을 IBK모바일웹에서 시작해 당사 홈페이지 개편까지 많은 프로젝트를 적용하였습니다.
반응형 디자인은 퍼블리싱이나 그래픽 디자인에 국한되있는 부분이 아닌 기획부터 테스트에 이르기까지 프로젝트 전반에 고려되어야 하는 문제로 여러가지 해법을 고민하고 있습니다.
여러 국, 내외 자료를 검토하여 N-Screen을 고려한 UI 제작 가이드에 대한 내용를 포스팅 하도록 하겠습니다.

첫번째, 반응형 웹디자인과 그리드시스템

반응형 웹디자인 이란?

데스크탑, 모바일 폰, 타블렛 PC, 스마트 TV 등 N-Screen의 시대로 불리는 다양한 디바이스의 환경에 맞춰 사이트의 레이아웃을 동적으로 변환하는 것.

- 이미지 출처 : Media Queries

반응형 웹디자인의 조건

• 첫째, 사용자에 대해 면밀히 조사하고,
• 둘째, 모바일 우선주의에 맞는 철학으로,
• 셋째, 디자인과 개발의 유기적인 협업방식이라고 할 수 있습니다.

반응형 웹디자인을 프론트앤드 레이아웃 관점에서 바라보면

• 가변적인 그리드 기반의 레이아웃
• 가변적인 이미지와 미디어
• 미디어쿼리(CSS3 명세 모듈)

- 출처 :<반응형웹디자인> 이단 마콧

그리드시스템이란?

그리드(Grid)는 주관적이고 감각적인 요소들을 객관적이고 과학적으로 정리하여 모듈화 시키는 시스템으로, 사전적인 의미는 격자(格子), 바둑판의 눈금 등을 말한다. 그리드는 디자인 작업의 출발점이며 지면을 작은 필드(Field)로 나누거나 공간을 작은 면으로 분할하고, 공간의 일정한 넓이를 결정한다. 즉, 세로 단(Column)이나 행간(Space), 페이지 여백(Margin) 등을 세밀하게 계산하여 구획 지어 놓은 것이라 할 수 있다. 이것은 일반적으로 글줄의 단을 나누기 위한 수직 컬럼과 사진 등 이미지의 크기를 결정하기 위한 수평 공간으로 면이 분할된 것을 의미하며 평면이나 공간에 있어서의 시각적 문제를 해결하기 위하여 사용된다. 그리드는 디자인의 모든 요소, 즉 타이포그래피, 사진, 그림들을 서로 융화시킬 수 있으며 디자인에 질서를 도입하는 하나의 수단이며, 작업의 능률을 올리기 위한 수단이다. 디자인에 있어서 어떤 목적을 위해 비례개념을 적용시킨 유기적 조직체를 구성하여 디자인 요소들을 서로 융화시켜 응집력, 통일감, 지속성을 부여해주는 하나의 틀이라고 할 수 있다.

그리드 시스템의 사용을 요약해 보면

• 정보를 조직화, 명백화 시키고,
• 본질을 간파하고 집중시킬 수 있고,
• 주관성 대신 객관성을 기르며,
• 창조적이고 기술적인 생산 과정을 합리화할 수 있고,
• 칼라와 형태, 물질적 요소들을 통합할 수 있으며,
• 평면과 공간 위에 건축상의 통제를 가능하게 한다.

그리드 시스템으로 작업한다는 것은 보편적인 확실성의 법칙에 준한다는 것을 의미한다. 틀이 잡혀 있는 그리드는 디자인 과정을 보다 명료하고 간단하게 해주며 디자인 작업을 신속하고 편리하게 해 준다. 즉, 그리드 시스템은 디자인 방법의 하나로 보다 객관적이고 합리적으로 작업할 수 있도록 해 주는 보조수단이며, 비주얼 레이아웃에 있어 시각적 질서와 일관성을 유지시켜 주는 것이라 할 수 있다.

- 출처 :<웹디자인 스타일의 포뮬러화를 통한 그리드시스템 활용에 관한 연구 : 인터넷 웹사이트 메인페이지를 중심으로> 동양대학교 학위논문(석사) 손기훈

그리드시스템을 웹 사이트 레이아웃에 사용해야 하는 이유

- 출처 : NALDZ GRAPHICS

1. 레이아웃의 사전 개념을 제공합니다.

웹 사이트의 레이아웃에 대해 클리이언트와 말할 때, 이미 마음 속에서 설계를 형성합니다.
이때 그리드를 사용하는 경우, 레이아웃에 대해 미리 생각해 볼 수 있어 실제로 작업을 시작하기 전에 디자인에 대해 몇 가지를 개선 할 수 있습니다.

- Site : Dynamit

2. 레이아웃의 균형을 맞출 수 있습니다.

신문이나 잡지의 레이아웃이 동일하듯이, 웹 사이트의 레이아웃도 균형이 있어야 합니다.
그러면, 사용자가 내용을 편하게 읽을 수 있게 될 것입니다.
균형 잡힌 레이아웃은 사용자의 신뢰를 높일 수 있습니다.

- Site : Eric Steuten

3. 좋은 구조를 만듭니다.

그리드를 사용해 좋은 구조를 만드는 것은 전체 웹 사이트를 더 잘 보이게 하고, 가용성과 가독성을 높이고 더 많은 사용자에게 친화력을 줍니다.
사이트의 좋은 구조를 만드는 것은 사이트 전체에 영향을 미칩니다.

- Site : Craig and Karl

4. 사이트의 느낌을 향상시킬 수 있습니다.

균형 잡힌 레이아웃은 사용자의 신용과 신뢰를 만듭니다.
리더는 전문적이고 신뢰할 수 있는 잘 설계된 사이트를 고려합니다.
그리드를 사용하면 디자이너는 좋은 느낌을 가진 웹 사이트를 만드는데 도움이 됩니다.

- Site : Tokyo Illustrators Society

5. 디자이너가 설계를 실현하는 데 도움이 됩니다.

그리드의 도움으로, 디자이너는 리더가 보고 싶어 하는 방법으로 완벽하게 표현된 디자인을 만들 수 있습니다.
그것은 동시에 사용자를 고려한 사이트의 요소 정렬 설계 방식을 연구하는데 더 쉽게 도와줄 것입니다.

- Site : Elliot Lepers

6. 사이트의 위치 요소(배열)에 대한 가이드 역할을 합니다.

웹 사이트에서 그래픽, 텍스트, 비디오 및 기타를 비롯한 다양한 요소가 있습니다.
이 모든 요소가 적절하게 배치되어야 합니다.
그렇지 않은 경우, 사이트는 복잡하고 비조직적으로 보입니다.
그리드는 이러한 요소가 좋은 배치를 할 수 있게 도움이 될 것 입니다.
또한 디자이너가 사이트의 모든 내용을 정렬할 수 있습니다.

- Site : 30 Elm

7. 그리드시스템은 사이트를 보다 매력적으로 보이게 합니다.

물론, 웹 디자이너 및 모든 웹 사이트 사용자가 매력적인 웹 사이트를 선호합니다.
모든 사람은 항상 매력적인 무언가를 보고 싶어합니다. 그리드를 사용하면 사용자에게 매력적인 모습을 더 어필 할 수 있습니다.  

- Site : Richbrown

8. 타이포그래픽의 무결성을 유지하는 데 도움이 됩니다.

타이포그래픽은 웹 사이트의 중요한 요소입니다.
타이포그래픽을 사용하는 웹 사이트의 중요한 부분을 설명하고 표시하는 것이 중요합니다.
그리드를 사용하여 당신의 유형에 맞는 적절한 영역을 사용할 수 있습니다. 전체 웹 사이트는 제목, 배너, 컨텍스트, 및 기타에 사용할 텍스트 크기가 균형을 찾습니다.
그리드는 당신의 유형에 맞는 가이드 역할을 할 수 있습니다.

- Site : UX Mag

9. 균일성과 일관성을 보여줍니다.

그리드 간격으로 균일하게 분포되어 있기 때문에 분명히 웹 사이트는 균일성 있게 표현 될 것입니다.
균일한 라인과 요소의 적절한 분배가 웹 사이트를 보기 좋게 할 것 입니다.

- Site : 42 Angels

10. 디자이너가 공백의 사용을 관찰 할 수 있습니다.

여백 또는 공백은 디자이너가 항상 명심해야 하는 일입니다. 여백은 모든 디자인 요소에 대한 호흡 공간을 제공하기 위한 디자인에 적용해야 합니다. 여백없는 사이트는 읽기 어렵습니다. 모든 요소가 접근해있는 사이트를 읽는 상상을 해보십시요. 확실컨데 당신은 내용을 해독할 수 없으면 당신은 그 사이트를 떠나게 됩니다. 사용자 눈에 편안한 레이아웃을 위해 충분한 여백과 공백을 사용합니다.

- Site : Wolff Olins