웹디자인/애니메이션/UIUX디자인 프로세스

웹사이트 개발 과정

- 컨셉 정의 → 컨텐츠 디자인 → 사이트 디자인 → 사이트 구축 → 테스트 → 수정 및 보완 → 유지관리

 

프로젝트를 기획할 때 중요한 것들

- 웹사이트를 구축하려는 이유가 무엇인지를 확인할 것

- 전체적인 안목에서의 프로젝트 컨셉 결정하기

- 사용자에 대한 분석을 기반으로 개발 전략과 홍보 전략 짜기

- 제작 시행 여부를 결정한 후 어떤 솔루션과 방법을 사용할지 결정하기

- 도메인 읾을 결정하고 신청한 후 구축한 작업물 연결하기

- 타겟층과 시장 설정하기

 

웹사이트 기획

- 웹 기획자, 웹디자이너, 웹프로그래머(백엔드) 등으로 구성된 팀 결성

- 웹사이트의 내용과 관련된 자료를 수집하기

- 자료 분석을 토대로 아이디어 도출하기(브레인 스토밍)

- 사용자 인터페이스(UIUX) 계획하기

- 전체적인 구조를 위한 스토리 보드 제작하기

 

웹디자인에서 중요한 요소

- 페이지 전체에 걸쳐 통일감을 줄 수 있는 요소들을 활용하기(대표적으로는 색상이 있다)

- 디자인에 일관성을 유지하기

- 전체적인 메뉴의 구조에 맞춰 세부 페이지를 디자인하기

- 네비게이션 구조를 고려하고 컨텐츠 배치를 조정하기

 

웹디자인의 유지관리 단계

- 사용자 중심의 인터페이스로 구현되어 있는지 파악하고 유저 반응을 조사한다.

- 디자인적인 부분과 기술적인 요소를 테스트 한 후 변경할 부분을 도출해내 수정한다.

애니메이션 컨셉과 디자인 도출 과정

- 컨셉을 설정한 후 그에 따른 자료를 수집한다. (자료 수집은 어느 분야든지 중요하다.)

- 줄거리의 전개 등에 대해 논의한다. (스토리 작가가 따로 있는 경우라도 기술적인 부분이나 한계에 의해 연출을 변경할 수 있다.)

- 스토리보드를 제작한다.

- 특수효과 등의 디자인적인 요소에 대해 논의한다.

 

프리 프로덕션(Pre-Production) 과정

- 애니메이션 제작을 지원하기 위한 2차적인 그래픽 작업을 뜻한다.

- 스토리 전개에 따른 2차원 배경(Background)의 모델을 사용한다.

- 여러 오브젝트(Object) 적용에 따라 맵핑(Mapping)한다.

- 텍스처(Texture)를 2차원 소프트웨어를 사용하여 제작한다.

(* C4D 같은 프로그램을 쓰게 되는데 프리미어, 애프터이펙트가 2D의 느낌이라면 C4D는 3D를 표현하지만 2D화면 즉, 모니터 화면에 출력되기 때문에 사실 체감상 2.5D 정도 된다. 차라리 2D면 2D고 3D면 3D고 하면 익숙해지기 쉬울 텐데 이 애매한 3D 툴에 적응하지 못해서 C4D나 마야 같은 프로그램을 포기하는 학생들이 많다. 그런데 나도 그런 학생 중 하나가 될 것 같다...)

 

모델링(Modeling) 작업

- 애니메이션에 등장할 모든 3차원 사물을 제작한다.

- 모델의 제작이 끝나면 스토리의 전개에 따라 모델에 움직임을 부여한다.

- 카메라를 선정하여 카메라의 뷰 파인더(View Finder)를 조절해 실제 화면에 출력될 화면을 구성한다.

- 모델의 움직임이 완성되면 질감이나 색채 등의 구성요소를 덧입힌다.

- 인위적인 조명을 설치해 시각적인 외형을 형성한다.

 

모든 작업 완성

- 작업에서 설정한 모든 데이터를 컴퓨터로 계산한다.

- 2차원의 화상을 만드는 렌더링(Rendering) 과정이 필요하다.

- 배경음악과 음향효과, 목소리를 반영한 사운드 트랙(Sound Track)을 적용한다.

- 편집하고 기록, 저장하면 애니메이션이 완성된다.

UIUX 디자인>

정보 채널

- 사람과 시스템 간의 접점, 사용자와 시스템 사이의 정보 채널을 의미한다.

- 사용하기 편리한 시스템을 만들기 위해 사용자 인지적 측면의 디자인을 한 것을 말한다. 사용자 편리성을 극대화시켜야만 하는 디자인이며, 사용자의 누적된 경험을 토대로 하기 때문에 사용자 경험 인터페이스라고도 한다.

 

인터페이스 디자인

- 사용자 인터페이스 디자인

- 사용자와 컴퓨터 사이에 일어나는 상호 교환의 문제점을 지각적, 인지적 특질로 체계화해 이를 개선해나가는 형식의 디자인이다.

- 사용자가 쉽게 활용할 수 있는 인터페이스의 디자인 접근 방법이다.

 

문자 방식

- 문자 방식 사용자 인터페이스(CUI), 메뉴 방식 사용자 인터페이스, 그래픽 사용자 인터페이스(GUI)의 3종류로 분류할 수 있다.

 

인간 공학

- 인간의 생리적, 심리적, 신체적인 특성과 한계를 정량적으로 파악하는 분야이다.

- 시스템, 환경, 제품 등에 널리 응용되고 활용되고 있다.

 

디자인 방법

- 메타포(Metaphor) 방법으로 경험과 관념, 생각과 개념, 새로운 것과 차이에 대한 새로운 내용을 이해시키는 방법이다.

- 그래픽 유저 인터페이스 디자인 원리는 디자인 요소들이 어떤 특정한 효과를 성취하기 위해 결합, 연관 법칙 또는 구성 계획을 도출해 내는 데에서 시작한다.

- 조화, 비례, 균형, 율동으로 상호 보완적인 관계를 가지며 형식적 요소와 감각적 요소에 영향을 받으면서 생겨나는 총체적인 표현이다.

 

인터페이스

- 한 시스템에서 눈에 보이는 부분을 말한다. 사용자가 보고, 듣고, 접촉할 수 있는 곳을 인터페이스라고 부른다.

- 정보를 그래픽으로 사용자에게 제공하는 것이다.

 

디자인 원리

- 규칙과 질서

- 통일(Unity)

- 미적 질서를 주는 원리로 부분과 부분, 부분과 전체 사이의 질서 형식을 말한다.

- 주제, 모양, 색채, 질감, 재료의 조화

- 지나친 통일은 단조롭고 지루한 인상을 줄 수 있기 때문에 적당한 변화와 강조는 필요하다.

- 균형(Balance)

- 시각적 무게에 대한 균등한 분배를 하는 것을 균형이라고 한다. 이를 다른 말로 표현하면 두 개 이상의 요소 사이에 안정감을 가질 수 있는 요소가 생기는 것을 말한다.

- 시각적인 균형은 모양, 명도, 질감, 색채의 균형 등에 의해 일어난다.

- 균형이라고 해서 무조건 대칭적인 것은 아니며 비대칭적이라고 하더라도 얼마든지 균형잡힌 디자인이 될 수 있다. (말은 쉽다...)

 

대조(Contrast)

- 어느 한 쪽에 있는 성질이 다른 쪽에는 없는 경우 대조가 일어난다고 표현한다.