디자인나스

nas story
Osulloc
이지은 학생

오설록 티 뮤지엄 마이크로 사이트이다. 컨셉은, 제주도에 있는 티 뮤지엄을 표현하기 위하여 제주도의 느낌을 일러스트로 표현. UI 인터페이스는, 마우스 스크롤에 따라 자전거 일러스트가 움직임을 보여주며 좌에서 우로 이동하며 둘러 볼 수 있고, 많은 표현기술이 쓰인 것에 비해 움직임의 속도는 빠른 편이다. 모니터해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 티 뮤지엄과 제주도를 고려하여 일러스트로 제주의 아침부터 밤까지 표현하였다.

긴 스크롤 사이트의 특징은 한 페이지 안에 스크롤로 이어지는 듯한 스토리 텔링 컨셉을 가져갈 수 있다. 섹션들을 명확하게 구분할 필요 없이 자연스럽게 스크롤의 진행으로 이야기하듯 콘텐츠를 풀어나갈 수 있다는 점을 충분히 활용한 작품이다. 팝업으로 뜨는 섹션 콘텐츠가 있지만 다양하지 못하며 단조로운 편이다.
-
레이아웃-플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
Lay
서유진 학생

기아자동차 레이 프로모션이다. 컨셉은, 사진편집을 활용하여 한눈에 레이를 소개하고 있다. UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 방식으로, 사진편집들로 인하여 많은 이미지를 사용한 것에 비해 움직임의 속도는 빠른 편이다. 모니터해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있으며, 해상도 관련 코치 마크가 사이트를 보는 사용자들의 친절함을 더한다.
콘텐츠기획은, 레이 자동차에 대한 정보성으로 제작되었으며 타이포의 내용전달보다 이미지의 내용전달로 쉽게 볼 수 있도록 구성되었다. 심플함을 초점으로 시작하여 편집적 관점으로 사이트를 풀어간다. 군더더기 없는 핵심 내용만 전달하는 심플함과 함께 monochromatic colors를 이용 사이트에 이용되는 사진 및 제품의 컨셉 색등과 같이 일관된 색으로 전체를 유지하고 있다.

인터렉션이 들어가는 버튼이나 사용자의 유도나 집중이 필요한 곳에 대비되는 색으로 노란색 버튼과 같은 요소를 만들기도 하였다. 심플함이 자칫 단순하고 평이한 부분으로 이어질 것을 고려, 섹션들마다 레이아웃을 다양하게 사용하고 있어 지루함 또한 적으며 호버효과등을 이용하여 시원시원하게 콘텐츠들을 보여주고 있다. 메인부터 시작하여 이질감 해소값으로 적용된 누끼편집이 스크롤링 시 간간이 보여 스타일리쉬해 보이는 점도 꽤 볼만하다.
-
레이아웃 - 플렉시블 그리드, 혼합 그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
Journey
이진영 학생

힐링 게임 저니의 마이크로 아이덴티티 사이트이다. 컨셉은, 저니 특유의 일러스트를 살려 아름답고 몽환적인 느낌으로 표현하였다. BG사운드 또한 훌륭하며 일러스트의 느낌만으로도 힐링이 된다.
UI 인터페이스는, 밑에서부터 위로 스크롤링으로 사이트를 둘러 볼 수 있으며, 사운드는 별도로 off 버튼이 구성되었다. 각각의 섹션마다 모션의 느낌은 최대한 부드럽게 표현되었다. 모니터 해상도는 PC용 디바이스 1920 해상도에 맞춰 있다.

콘텐츠기획은, 저니 특유의 몽환적인 아이덴티티를 살려 표현하는 것이 주된 기획이었으며 섹션없이 단페이지 구성이 특징이다.
-
레이아웃-플렉시블그리드 / 타이포그래피 - 이미지폰트 80%, CSS 폰트 20% / 컬러 - 아이덴티티 컬러 (그라데이션 표현)

nas story
Melon Load
이병용 학생

멜론 음악 사이트에서 준비한 음악 문화 페스티벌 프로모션 사이트이다. 컨셉은, 홍대라는 특정한 공간에서 열리는 음악 페스티벌이라는 방향성으로 홍대 지도로 멜론 로드를 표현하였다. UI 인터페이스는, 마우스 좌표 드래그 값으로 이동하는 방식이며, 메뉴는 좌측으로 GNB영역과 함께 히든메뉴로 공연장 이름의 말풍선을 클릭하면 박스구성으로 콘텐츠 정보를 살펴볼 수 있다.
둘러 보기 방식을 이용하였지만, 사용자들이 지쳐서 이탈하는 현상을 방지하고자 주요 콘텐츠에 대해서 하단에 네비게이션을 노출하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠는, 단 그리드와 혼합 그리드를 이용하여 보여주며, 콘텐츠 또한 육하원칙을 기준으로 풀었다.

페이퍼 아트의 느낌과 라인일러스트를 활용하여 아기자기함을 풀었으며, 멜론로드 좌측의 GNB를 이용하여 퀵 메뉴를 이용 멜론로드에 대한 정보를 빠르고 쉽게 볼 수 있도록 진행하였다. 야외공연으로 진행하는 만큼 날씨에도 민감한 부분을 놓치지 않고 상단에는 날씨에 대한 정보를 빠르고 쉽게 보여주고 있다. 오실레이션부분으로 멜론로드 이벤트를 하는 곳과 그렇지 않은 곳의 음영 차이를 확실히 했다면 한결 가시성을 좋았을 것 같은 아쉬움과 말풍선을 클릭하면 콘텐츠 내용을 볼 수 있다는 직관성이 표기되어 있지 않은 부분에서 여운이 남는다.
-
레이아웃 - 플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
Porsche
나예솔 학생

포르쉐 마이크로 아이덴티티 사이트이다. 컨셉은, 다양한 그래픽과 모션을 이용하여 흥미롭게 제작되었으며 마우스 좌표를 이용한 레이아웃이 포인트이다. UI 인터페이스는, 마우스를 잡고 끄는 방식으로 제작되어 재미와 불편함의 두 가지가 공존한다. 그래픽의 표현력은 집중력 있게 잘 표현되었지만 이로 인해 무거운 인터페이스는 다양한 디바이스를 제공하지 못한다.

모니터해상도는, PC용 디바이스 1920 해상도에 맞춰 있으며 와이파이 환경에서는 느린 편이다. 콘텐츠기획은, 보여주기에 대부분 맞춰 있다. 정성을 들여 표현한 그래픽작업은 충분한 비주얼을 보여주지만 섹션기획은 거의 없어 단출하다.
-
레이아웃-플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
Maserati
김정아 학생

이탈리아 스포츠카 마세라티의 Granturismo 브랜드 마이크로 사이트이다. 컨셉은, '스포츠카 마세라티의 웅장함을 소개하다'에 주안점을 맞추었다. 고객 경험관리(CX: customer experience)에 초점을 둔 마세라티의 콘텐츠는 Granturismo 차량 소개, 카 컨피규레이터, 기종 소개에 대해서 3개의 섹션으로 나뉘며, UI 인터페이스는, 비주얼에서 보이는 블럭 메뉴들로 순차적으로 섹션을 이동하는 방식이다. 또한, 좌측 최상단에 있는 마세라티의 로고 메뉴로 활용하고 있어 블럭 메뉴 클릭 이동 방식 외에도 쉽게 전반적인 사이트 카테고리를 살펴볼 수도 있다.
마세라티는 사진을 활용 편집적인 디자인으로 이끌고 있다. 많은 사진을 사용함에도 움직임의 속도는 빠른 편이다. 페이드아웃을 이용, 각각의 섹션마다 넘어갈 때의 시선의 흐름을 최대한 부드럽게 연결한다. 모니터해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠기획은, 광고사진과 같은 느낌으로 메인 비주얼 한 장에 마세라티를 로우앵글 구도와 함께 빛의 느낌 및 편집적 느낌으로 중후함을 자아내고 있다.

각 섹션마다 2분할, 4분할 등으로 분할 레이아웃을 사용 주목성과 명쾌성을 띠고 있다. Micro Interaction 디자인이론을 사용하고 있는 마세라티는 고객 경험관리(CX: customer experience)에 꽤 많은 기획력을 생각하며 만들어진 작품이며, 콘텐츠 중에서도 카 컨피규레이터를 보면 그 점을 잘 느낄 수 있다.
카 컨피규레이터는 올해 영국으로 시작한 잠재적 소비자들을 위한 차량 색상, 옵션 등의 맞춤 선택 기능을 추가하여 상세하게 살펴볼 수 있는 플랫폼이다. 모든 페이지에서는 다양한 비주얼의 요소가 등장하기보단 마세라티 Granturismo에 초점을 맞추어 보여주고 있는 힘이 있다. 집중력있게 사이트를 보여주는 힘을 갖고 있다. 그래서 더욱 집중력 있게 살펴 보게 된다.
-
레이아웃-블럭그리드 / 타이포그래피 - 이미지폰트 80%, CSS 폰트 20% / 컬러 - 통합컬러

nas story
Absolut
박지수 학생

앱솔루트 마이크로 아이덴티티 사이트이다. 컨셉은 앱솔루트를 즐기는 화려한 분위기를 표현하고, 기획은 광고기획으로 초점을 이루어졌다. UI 인터페이스는, 위에서부터 밑으로 스크롤링을 이용하여 둘러 볼 수 있고, 각각의 섹션마다 모션의 느낌은 최대한 부드럽게 연결되었다. 모니터해상도는, pc용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠기획은, 앱솔루트는 광고기획 관점으로 풀어진 사이트이며, 이점은 인트로 부분에서부터 만날 수 있다. 인트로에서 스위치 부분은 인상적인 부분으로 꼽을 수 있다. '불을 키다'는 기획으로 어두운 화면에서 시작하여 스위치가 켜지는 느낌과 함께 앱솔루트 내용을 볼 수 있는 건 참신한 광고기획으로 여길 수 있다. 이미지 리터칭으로 표현하고 있으며, 아이덴티티 컬러 및 제품의 질감, 패키지 활용 등을 적극적으로 활용하여 앱솔루트가 가진 시원함을 잘 보여준다.

섹션 페이지로 넘어갈 때마다 부드럽게 화면에 보이는 콘텐츠들은 앱솔루트가 가진 고급스러운 느낌을 증폭시킨다. 앱솔루트는 명확한 타깃 오디언스 선정을 한 작품으로 볼 수 있다. 아이텐티티가 제품과 제품의 컬러 초점이 맞춰져 있어 비주얼 퀄리티로 오늘 밤 앱솔루트가 한잔 기울여보고 싶다는 생각이 들 정도다. 실무에서 정말 좋은 광고는 멋지고 크리에이티브하고 아이디어가 살아 있는 광고보다는, '광고 기획에서 설정한 타깃 오디언스의 마음을 움직이고 광고 목표를 달성해야 한다'는 부분까지 살펴보아야 하는 점에서 이 작품을 본다면 성공한 작품이라고 볼 수 있다.
-
레이아웃-플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 색상의 간소화로 아이덴티티 강조

nas story
Yves Saint Laurent
고광석 학생

이브 생로랑 마이크로 아이덴티티 사이트이다. 컨셉은, '내 책상 위의 이브 생로랑'으로 VEG 포토그래피 스큐어모피즘을 활용, 사실적 비주얼 표현방식을 사용했다. UI 인터페이스는, 센스있는 인터렉션으로 마우스 무브 드래그 형식으로 감상할 수 있다. 마우스 드래그 형식으로 마치 책상 위를 둘러보는 느낌으로 부드럽고 자연스레 이동한다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
이브 생로랑이라면 누구나 한 번쯤 들어보았듯 명품 분야에 속한다. 콘텐츠 기획은, 홍보 및 브랜드 전달 목적으로 만들어진 사이트의 목적과 함께 스큐어모피즘에 맞추어 사실적 주의 관점에서 여성들이 좋아할 이브 생로랑의 베스트 제품들을 책상이라는 공간에서 친근한 느낌처럼 보여주고 있다. 사용자의 행동에 반응하는 인터렉션등 사용자에게 흥미를 유발하고 감각이 돋보이는 인터렉션이기하다.

반면 마우스의 드래그로써 이동해야 하는 번거로움도 따른다. 비주얼사이트로 이루어진 이브 생로랑 사이트에서 사용자들을 위해 준비한 재미 중 소개해 볼 만한 부분이 있다면, 책상 스탠드의 on/off로 불을 꺼보기도 하고, 부드럽게 롤링 되는 책의 비주얼 영역이라든지, 노트북 밑에서 나오는 명함 등은 Real-Life Metaphor의 역할로 재미있는 요소이자 스큐어모프를 더욱 강조시킨다.
비주얼 사이트에 초점을 맞추어서였을까? 볼만한 콘텐츠의 내용은 적은 편이어서 애석하다. 사실적 비주얼을 고려, 책상 위에 있을 법한 태블릿, 노트북, 책과 같은 오브젝트를 활용하여 비주얼 영역과 콘텐츠 영역을 구분해두기보단, 자연스럽게 오브젝트 내에서 콘텐츠들을 풀고 있어 콘텐츠 정보 전달에는 힘이 약하다.
-
레이아웃-플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 색상의 간소화로 아이덴티티 강조

nas story
PutongPutong Taiwan
김유나 학생

타이완(대만) 여행을 소개하는 프로모션 사이트이다. 컨셉은, 타이완 마스코트 오숑 캐릭터가 소개하는 여행 소개로서 재미있고 친근함으로 이루어졌다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤 다운 형식이며, 북마크처럼 우측에서는 오숑이 따라 다니며, 현재 보고 있는 페이지가 몇 번째고 어디인지 친절하게 알려준다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 여행소개 하면 떠올리는 그런 딱딱한 레이아웃과 정보전달이 많은 형식을 벗어나 친근한 일러스트와 함께 오브젝트 꼴라쥬 등의 인터렉션 디자인으로 눈길을 사로잡는다. 각 섹션 1페이지당 1메시지를 전달하고 있다. 크게 섹션으로 살펴본다면, 미식 / 문화 / 쇼핑 여행으로 나누어지며 놓치지 말아야 할 꿀팁을 오숑의 캐릭터 활용으로 재미있게 전달한다.

각 섹션으로 넘어가기 전의 간지 페이지가 볼거리 중 하나이다. 오브젝트들과 변형체 타이틀로 시선을 끌며 누끼편집이 활용되어 레이아웃의 리듬감과 율동감과 함께 곧 소개될 본문의 내용에 대해 궁금증을 유발하기 때문이다. 콘텐츠 보기 방식에는 팝업창 방식의 포맷편집 구성을 이용, 시선 고정을 시키며 내용을 소개하고 있다. 포맷편집에서 고려해야 하는 점인, 정리는 잘 되어 보일지라도 자칫 재미없는 레이아웃이 될 수 있는 것처럼 포맷편집 안에서도 오실레이션을 활용했더라면 더 보기 좋은 형식으로 디자인이 되었을텐데하는 안타까움이 남는다.
-
레이아웃 - 플렉시블 그리드, 블럭그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
NICK KNIGHT : IMAGE
지슬아 학생

국내 최초로 전시되는 닉나이트 사진전이다. 컨셉은, 사진전인 만큼 최대한 모던하게 표현하기 위하여 투톤 위주의 작업으로 진행되었다. UI 인터페이스는, 빠르고 쉽게, 그리고 정보전달 위주로 제작되었으며 메인 인터페이스에서 동적인 모션을 추가하였다.
모니터 해상도는, 21인치 이상의 1920 해상도에서 가장 적합한 뷰를 볼 수 있으며, 기타 사이즈에서 반응형으로 제작되지 않았기 때문에 노트북이나 태블릿에서 작품을 보기가 어렵다. 콘텐츠는, 대림미술관에서 진행되는 정보와 이벤트 프로모션을 구성으로 생각하며 진행하였다.

타이포그래피는 정보전달에 맞게 변형체는 사용되지 않았으며 고딕계열의 카피라이트와 본문으로 자간의 움직임을 조밀하게, 자폭의 움직임은 카피라이트에서 표현되어 좀 더 판독성 위주의 작업이 진행되었으며 본문 이미지 폰트의 쓰임으로 가독성이 아쉬운 부분이다. 단순한 사진 편집에서 그치지 않고 색채 표현방식으로 듀오톤(duotone)을 사용하여 투톤 이상에서 오는 강렬하고 세련된 느낌을 연출하였다.
-
레이아웃 - 플랙시블 그리드, 블럭그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 투톤이상에서의 강조

nas story
Wedge wood
임유정 학생

영국의 도자기 회사인 웨지우드 아이덴티티 사이트이다. 컨셉은, 라인일러스트와 수묵화 등의 표현방식을 활용 250년의 전통과 따뜻한 느낌의 웨지우드 아이덴티티를 전달하려는 기획컨셉으로 구성되었다. UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 스크롤다운이며, 많은 이미지를 사용한 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 큼직큼직한 사진 편집을 중앙정렬로 이용하여 맞추어 스크롤 다운으로 밑으로 내려오며 페이지가 보이는 형식이다. 큼직큼직한 사진 편집 , 타이포 등으로 시원시원해 보이는 느낌을 주고 있다. 화이트 BG가 가진 깨끗함과 단색의 라인 일러스트으로 비주얼을 표현해 나가고 있으며, 이는 도자기의 아이덴티티의 오리엔탈리즘과도 조화롭게 이어가며, 고급스러움을 한층 돋보이고 있다.

콘텐츠 섹션들의 여백으로는 텀이 길어 자칫 공백으로 보일 수 있던 부분을 라인일러스트를 타고 내려오면서 꾸준히 보여주고 있기에 이질감 해소와 눈 트임의 부분을 잘 풀어가고 있다. 아쉬운 점이 있다면, 타이포 부분과 편집 2가지를 꼽을 수가 있다. 섹션 타이틀과 본문은 이미지 폰트로 이루어져 있으며 약간의 픽셀 깨짐 등이 눈에 읽히게 된다. 이러하듯, 가독성 및 사진과 본문의 내용 겹침, 여백 등 미세하지만 조금 더 신경을 썼더라면 더 좋은 작품으로 승화되지 않았을까? 라는 여운이 감돈다.
-
레이아웃 - 플렉시블그리드 / 타이포그래피 - 이미지폰트 70%, CSS폰트 30% / 컬러 - 통합컬러

nas story
Johnnie Walker
이도화 학생

스카치위스키 브랜드 조니워커의 아이덴티티 사이트이다. 컨셉은, 신사를 위한 조니워커라는 조니워커 브랜드 아이덴티티를 활용하여 만들어갔다. UI 인터페이스는, 하단의 원형 기어 GNB를 이용하여 각 섹션으로 넘어간다. GNB는 원형 기어 형태의 모양성과 가죽 텍스쳐를 이용, 고급스러움과 원형 기어를 돌리며 전환되는 UI 구성으로 인상적이다.
모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠에서 BG는 어두운 값으로 조니워커의 제품과 콘텐츠를 잘 보일 수 있도록 염두에 뒀다. 각 섹션 마다 조니워커의 라벨링에 그려진 신사가 등장, 신사의 캐릭터는 오른쪽 아래에 존재함으로 이야기를 이어나가며 콘텐츠를 보여주고 있는 느낌마저 감돈다.

필기체 변형체와 명조체 등의 타이포와 오브제 꼴라쥬 등은 조니워커의 아이덴티티는 중후함을 전달하고자 하였다. 타이포그래피 부분 활용된 명조체, 자간, 행간 및 각 섹션마다 달라지는 레이아웃 정렬 방식 등을 전반적으로 살펴본다면 조금은 오래되어 보이는 듯한 사이트의 느낌이지만 이는 조니워커의 전통성과 연계되는 느낌을 준다. 프로모션에 나오는 음주운전을 하지 않겠다는 약속의 콘텐츠 내용으로 소개되는 약속한 사람, 집까지 안전하게 타고 간 거리 등은 조니워커의 품격을 더하는 페이지는 UX 부분에서 조니워커의 브랜드를 잘 보여주는 콘텐츠로 기억에 남는다.
-
레이아웃 - 플렉시블그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 70%, CSS폰트 30% / 컬러 - 아이덴티티 컬러

nas story
Galaxy GearS2
박혜은 학생

삼성 스마트 워치 기능에 대하여 설명하는 갤럭시 기어 s2 마이크로 사이트이다. 메인화면에서는 로켓 발사 표현을 보여주며 아래에서 위로 올라가는 스크롤링 방식으로 우주를 표현하고 있다. 컨셉은, 기어 s2에 대한 Unique and Advanced 앞선 이미지를 표현할 수 있는 유니크하고 특별한 디자인을 보여주는 부분에 콘텐츠 초점을 풀고 있어 스크롤링과 함께 따라오는 기어 s2 화면에서 콘텐츠를 보여주며 고객 경험관리(CX: customer experience)도 함께 고려 되었다는 점을 발견 할 수 있다.
UI 인터페이스는, 플렉시블 그리드, 혼합 그리드로 이루어져 있으며, 긴 스크롤링 페이지로 감상 할 수 있다. 메인화면에서는 로켓 발사 표현을 보여주며 아래에서 위로 올라가는 스크롤링 방식으로 우주를 표현하고 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.

콘텐츠 중 첫 번째 섹션에서는 기어에 대한 다양한 스크랩을 보여주며, 두 번째 섹션에서는 기어의 화면에서 이루어지는 다양한 애플리케이션 제공방법을 보여주어 고객 경험관리(CX: customer experience)를 고려하고 있다는 것을 알 수 있다. 시원시원한 view를 위하여 혼합 그리드로 콘텐츠 내용에 맞게 적절하게 그리드를 사용해 나가며, 그로 인하여 시원시원한 느낌마저 든다.
아쉬움이 있다면, 화면 구성상 기어 s2 화면이 가운데 정렬에 맞추어 지속해서 보여주어 콘텐츠에 대한 정보전달에 대해서는 가시성, 가독성이 떨어지는 부분이다. 또한, 타이포도 그레이 계열로 오실레이션을 고려하여 강조, 비강조를 생각한 부분이라든지, 시원시원한 비주얼을 고려하여 여백 활용에 대하여 생각 해 본다.
-
레이아웃 - 플렉시블 그리드, 혼합 그리드 / 타이포그래피 - 이미지폰트 80%, CSS폰트 20% / 컬러 - 통합컬러

nas story
Nikon
임지혜 학생

니콘 카메라 중 D500 기종을 소개하는 마이크로 사이트이다. 컨셉은, 우주로 잡아 신비로움을 표현하고 있고, UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 방식이다. GNB는 메인화면에 고정, 퀵 메뉴 역할로 화면 우측에 게이지 바가 따라 다니지만, 숫자로 표기되어 어떤 메뉴인지 확인이 어려운 점은 약간 불편한 사항 중 하나로 꼽을 수 있다.
모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 니콘 사이트는, 스큐어모피즘의 디자인이론에 초점을 맞춘 만큼 극사실화의 더 가까워질 수 있도록 비주얼 스킬에서는 오브제꼴라쥬, 텍스쳐드로잉, 명암스킬, 이미지 리터칭 합성으로 이어지고 있다.

특히 가장 큰 강점은 모션이라고 볼 수 있다. 메인 비주얼 중 마우스 좌표값을 따라 다니는 지오 메트릭은 마치 별자리 같은 느낌으로 재미와 시선을 사로잡으며, 각 섹션에서도 빛의 움직임 등 모션을 추가하여 화려함을 더해주고 있다. 아쉬운 점이 있다면 충분한 비주얼을 보여주고 있지만, 섹션콘텐츠가 있지만 전달하고자 하는 내용이 적은 부분에서는 심심함이 감돈다.
-
레이아웃 - 플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 통합컬러

nas story
HONEY TONGTONG
김혜인 학생

해태브랜드 과자 허니통통 프로모션 사이트이다. 컨셉은, 꿀벌들이 허니통통을 만드는 제조공장을 구경한다는 스토리텔링과 귀여움을 더하는 일러스트 사용, 모션들을 가미하여 더욱 아기자기한 맛을 살려낸다. UI 인터페이스는, 패럴렉스 스크롤 방식이다. 섹션으로 내려갈 때의 속도감과 부드러움은 좋은 편에 속한다. 메인부터 따라 내려오는 꿀벌이 스크롤링에서도 지속해서 보여주는 재미를 추구한다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
허니통통 사이트 콘텐츠에서 가장 볼만한 요소는 표현기술을 꼽을 수 있다. 이 작품은 명암스킬을 통해 하나하나 그려나간 것이 인상적이다. 일러스트는 일러스트 프로그램으로 그려나간다는 생각을 하는 것이 보편적인 생각이지만, 웹 형태에서는 사실 일러스트 프로그램은 잘 사용하지 않는다.

그 이유는 한 번 더 비트맵으로 컨버팅이 된다면 깨져 보이는 경향도 있기에 처음부터 포토샵에서 제작하기 때문이다. 명암스킬은 사물을 다른 시각으로 인지시키기에 눈을 키우고, 처음부터 끝까지 고해상도로 그리는 형태로 높은 퀄리티를 보장한다.
scrolling over clicking (단일페이지)로 이루어져 비주얼에 끊김이 없도록 표현작업을 이어갔다. 편집적 관점으로 순서를 스텝으로 나누어 시선의 흐름을 잡아주고 있다거나, 아이덴티티에 잘 어울리는 변형체와 정보전달을 위한 고딕체를 적절하게 잘 섞어서 사용하였다. 비주얼은 잘 표현된 작품이나 전반적으로 쉐도우 값으로 표현된 그라데이션에서 미련이 남는다. 그라데이션을 조금 덜 추가했다면 더 좋은 작품이 될 수 있지 않았을까 싶은 생각이 떠오른다.
-
레이아웃 - 혼합그리드 / 타이포그래피 - 이미지폰트 70%, CSS폰트 30% / 컬러 - 통합컬러

nas story
I Love You Movie
한은주 학생

영화 좋아해줘에서 이벤트로 진행하는 직장인 칼퇴근 프로젝트 '썸' 프로모션 사이트이다. 컨셉은, 미디어 적극 활용으로 좋아해줘 영화를 소개하기에 맞출 수 있다. UI 인터페이스는, 위에서 아래로 이동하는 스크롤다운 형식이다. 또한 최상단 우측에 존재하는 햄버거 메뉴를 이용하고 있어 쉽게 원하는 콘텐츠로 이동도 가능하지만, 아이콘만 그려져 있기에 한 번씩 눌러봐야 어떤 콘텐츠로 이동하게 되는지를 알 수 있는 번거로움이 따른다.
각 섹션마다 large videos background로 좋아해줘 영화를 적극적으로 홍보하고 있지만, 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠는, 영화를 소개하는 목적성에 초점을 크게 두며 콘텐츠를 보여주고 있다.

각 섹션별로 나누어지는 블럭 그리드로 구성되었으며, 가로 형태로 시원시원하게 2분할로 풀 화면 구성 레이아웃을 발견하게 된다. 분야가 영화이다 보니, 보여주는 콘텐츠는 영상, 사진 등이어서 자칫 지루해 보일 수 있는 콘텐츠이기에 전반적으로 타이포그래피에 힘을 쓰고 있다.
영화 포스터에서나 볼 법한 큰 카피와 각 섹션에 대한 이름, 그리고 변형체 슬로건 등 오실레이션을 잘 활용하여 조화롭게 이루어졌다고 볼 수 있다. 새로운 창으로 바뀌는 것이 아닌, 현재 값에서 각 섹션 해당 콘텐츠를 가로 슬라이드 형식으로 보여주는 새로운 UX 구성 또한 인상적이라고 할 수 있다.
-
레이아웃 - 단그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 80%, CSS폰트 20% / 컬러 - 통합컬러

nas story
Panda World
남보라 학생

에버랜드에서 진행되는 판다월드 프로모션이다. 컨셉은, 친근함을 표현하기 위하여 전체 일러스트로 표현작업을 이루었다. UI 인터페이스는, 메인에서 서브메인으로 이루어지며 밑에서부터 업스크롤링으로 둘러볼 수 있으며, 기차나 캐릭터의 움직임이 재미있으나 전체적으로 큰 변화가 있지는 않다.
모니터 해상도는, 1920 기준에서 최적화되어 있으며 태블릿이나 노트북디바이스에서도 잘 볼 수 있다. 와이파이 환경에서도 빠르게 오픈될 수 있는 만큼 가볍게 제작되어 속도가 좋은 편이다.

콘텐츠는, 에버랜드에서 진행되는 프로모션의 기획을 담았으며, 에버랜드와 판다가 갖고 있는 이미지화와 아이덴티티를 생각하여 만들어진 일러스트의 퀄리티는 성공적이라고 볼 수 있지만, 내용의 간소한 점과 섹션UI 등의 콘텐츠 기획에서는 전반적으로 단출함에 안타깝다. 타이포그래피는 이미지 폰트로 미적 기능 위주의 타이포로 제작되었으며 변형체의 움직임이 좋다.
-
레이아웃 - 플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 단컬러 일러스트 (백터일러스트-그라데이션 배제)

nas story
Hyundai Card , Music Library
김예은 학생

현대카드에서 운영 중인 뮤직 라이브러리 아이덴티티 사이트이다. 컨셉은, 라이브러리라는 공간에 초점을 맞추어 공간 꼴라쥬와 함께 편집적으로 사이트로 풀어간다. UI 인터페이스는, 스크롤다운 다운 방식 형식으로 이루어진다. 모니터 해상도는 PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠 시작부분은, 불을 켜주세요라는 코치 마크로 시작되는 콘텐츠. 불을 켜면 서재라는 공간이 비치며, 책상 한가운데에는 현대카드 뮤직 라이브러리 미니어처가 등장한다. 현대카드를 만든 학생의 전공인 건축학과라는 장점을 살리기 위하여 수작업으로 현대카드 뮤직 라이브러리를 직접 미니어처로 만들어 보았다. 공간적 소개 페이지로써 고딕의 시스템 폰트 느낌의 타이포 활용 정보전달을 위해 편집적으로 기획구성에 포인트를 잡았다.

전반적으로 오실레이션을 너무 고려해서 그런지 폰트의 쓰임과 옅은 색채로 가독성이 아쉬운 부분 또한 따른다. 현대카드 브랜드의 아이덴티티를 고려, 편집적인, 정갈한 느낌 및 심플한 아이콘 활용 등을 고려하며 작업하였다. 라이브러리 자체를 소개하는 페이지들과 언더스테이지라는 공연 관련 소개 페이지를 나눈 그룹 섹션이 인상적이다. 언더스테이지를 보기 위해 자동 스크롤링으로 한참 내려가게 되는데, 이는 마치 엘리베이터를 타고 지하로 내려가는 느낌이 들 정도로 블럭 구분을 잘 나누었다.
-
레이아웃 - 플렉시블그리드, 블럭그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 아이덴티티 컬러

nas story
ANimalFilm Festivalin Suncheounbay
이정희 학생

순천만 세계 동물 영화제 프로모션 사이트이다. 컨셉은, 축제라는 점을 충분히 살리기 위하여 다양한 일러스트와 다채로운 색채는 시선을 사로잡으며 축제라는 컨셉을 전달한다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운으로 둘러 볼 수 있으며, 좌측의 GNB 부분에는 쉽고 빠른 이동을 염두에 두어 아이콘을 활용하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 1장의 큰 그림처럼 섹션 나눔 없이 단 페이지로 일러스트로 표현되었다. 귀여운 색상 활용과 함께 대비구성으로 시선의 흐름을 고려하여 지그재그로 콘텐츠를 보여주고 있으며, 상세 페이지는 최대한 줄이도록 노력하였다.

열린 포맷편집구성을 활용, 콘텐츠를 보여주고 있기에 전체적으로 조화를 생각하며 작업한 흔적이 보인다. 타이포그래피는 정보전달에 맞게 변형체는 사용되지 않았으며 고딕계열의 카피라이트와 본문으로 자간의 움직임을 조밀하게 사용하였지만, 전체적인 조화를 위하여 사용된 콘텐츠 본문 색채와 시원시원 하지 못한 작은 박스 판 구성을 보면서 가독성과, 여백에 대해서 조금은 미련이 남는다.
-
레이아웃 - 플렉시블그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 단컬러 일러스트 (백터일러스트, 그라데이션 배제)

nas story
Jeonju International Film Festival
박지애 학생

제17회 전주 국제영화제 개막을 알리는 프로모션 사이트이다. 컨셉기획은, 전주국제영화제 홍보를 알리기 위한 목적이며, 45개국에서 211편의 영화로 141번을 만난다는 카피와 같이 규모가 큰 영화제 소개와 함께 영화제에 참석하려는 방문객들에게 영화소개 및 상영시간을 알리고 있다.
UI 인터페이스는, 오른쪽 중앙배열로 놓인 GUI를 이용, 원하는 페이지로 이동하게 된다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠 중, 각 섹션페이지 내의 콘텐츠는 플렉서블 그리드를 이용하여 긴 가로형태로 내용이 구성되어 있다.

이는 스크롤을 활용해 읽어 나갈 수 있다. 흔히 접하지 않은 구성방식이기에 재미있는 점도 있지만, 여기저기 흩뿌려진 UI 인터페이스와 페이지 넘김 없이 한 페이지에서 전반적인 내용을 둘러보는 것은 좋지만 스크롤의 번거로움과 사면에 흩뿌려져 있는 UI는 한번에 살펴 보기에는 어려움이 따른다. 전주국제영화제는 편집 스타일과 보정의 조화로움을 생각하며 이루어졌다.
-
레이아웃 - 블록그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 20%, CSS폰트 80% / 컬러 - 아이덴티티 컬러

nas story
Horror maze
이경연 학생

에버랜드 호러빌리지 마이크로 프로모션 사이트이다. 컨셉은, 스토리텔링과 그래픽 관점에 맞추어 작업을 진행했다. UI 인터페이스는, 하단의 GNB를 이용하여 각 섹션으로 넘어가게 되며, 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.

콘텐츠는, 광고 기획으로 비주얼에 초점을 맞추어져 있기에 내용상으로는 단조롭지만, 스토리텔링과 함께 hyper realism으로 극사실적인 표현에 초점을 맞춘 그래픽에서는 볼만하다. 마치 호러 빌리지에 온 것과 같은 기분처럼 으스스한 기분에 보는 내내 가슴을 졸이게 된다.
-
레이아웃 - 블럭그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 아이덴티티 컬러

nas story
Socar
이종찬 학생

카셰어링 서비스 쏘카 마이크로 사이트이다. 컨셉은, 귀여운 플랫 일러스트를 활용하여 쏘카를 친근하게 소개한다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운 방법이며, 쏘카 콘텐츠는 블럭 그리드로 구성되어 있어 위의 GNB와 각 섹션에 있는 top의 버튼을 이용하여 둘러보는 것도 보기 편한 인터페이스의 방법이라 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠에서 컬러는 쏘카의 브랜드 아이덴티티인 하늘색 색상을 이용, 전반적으로 연계색상을 이어간다. 포인트로 비쳐야 하는 강조 부분인 버튼 부분 등은 대비색상인 노란색을 이용하였다. 메인 비주얼 등 곳곳에서 귀여운 플랫 일러스트를 활용하여 일러스트 표현을 함으로 친근함을 전하고자 하였다.

스크롤 다운으로 보는 사용자들을 위하여 넘버링 활용과 레이아웃 교차 대비 방식으로 접근성을 고려하며 콘텐츠를 보여주는 방식에 도입하였다. 비주얼적으로는 하나로 이루어졌지만, 서비스를 이용하려는 사용자들을 위하여 콘텐츠 부분에서는 블럭 그리드로 정보 제공을 하고 있다.
이질감을 고려하여 흩뿌린 오브젝트 등으로 꽉 차 보이는 느낌에 대한 답답함과 콘텐츠 간의 블럭 구분의 사이 여백이 생각보다 좁아 보인다. 타이포의 고딕계열 변형체로 인한 가독성과 전체적으로 눈 트임을 고려한다면 더 좋은 사이트가 되지 않을까 하는 아쉬움이 떠오른다.
-
레이아웃 - 플렉시블그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 / 컬러 - 아이덴티티 컬러

nas story
another_Planet
박초희 학생

주얼리 브랜드 어나더 플래닛 마이크로 사이트이다. 컨셉은, 주얼리 브랜드의 초점으로 영롱함을 표현하고자 하였으며, 영롱함으로 밤하늘을 선택하였다. UI 인터페이스는, 긴 스크롤링 페이지로 만날 수 있다. 긴 스크롤링 페이지 이동 방식이지만, 3개의 섹션으로 나누어 보여준다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠에서 볼만 한 점은 기하학적인 도형과 선, 패턴 등을 표현과 조화를 띄고 있는 주얼리 고유의 디자인을 그대로 감상할 수 있다. 주얼리가 가진 입체감과 세련미를 조화롭게 이루기 위해 Polygon graphic design과 그라데이션을 이용하여 그래픽 표현방식을 활용하였다.

디자이너들의 욕구와 함께 기하학적인 도형과 선, 패턴 등을 사용해 메인화면의 집중도와 브랜드 이미지 강화를 높였다. 모션 움직임을 이용, 재미있는 디자인을 많이 사용 정적으로 보이지만 동적인 표현도 가미하였다. 어나더 플래닛이 가진 브랜딩을 소개하는 사이트로 초점은 그래픽 사이트로 맞추어 그래픽을 해치지 않도록 고스트 버튼 등을 이용, 그래픽을 방해하지 않는 초점으로 작업을 이어간다.
-
레이아웃 - 플렉시블 그리드 / 타이포그래피 - 이미지폰트 70% CSS폰트 30% / 컬러 - 통합컬러

nas story
Bless barbershop
장동혁 학생

남성을 위한 헤어샵 블레스바버샵의 아이덴티티 사이트이다. 컨셉은, 바버샵이라는 헤어샵이 친숙하지 않은 사람들을 위하여 공간을 선택하여 풀어간다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운 방식으로 사이트를 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠로는, 메인 비주얼에서는 군더더기 없이 바버샵 view를 보여주며 소개한다. 이는 합성작업을 통하여 공간 꼴라쥬로 표현했지만, 합성작업이 눈에 읽히는 느낌은 애석하다. 메인 다음의 섹션 이동 시, 바버샵의 샵 내부로 공간변화가 생겨 마치 현재 바버샵에 들어온 듯하다.

공간이라는 부분을 어떻게 하면 친근하게 풀어갈 수 있을까? 라는 생각을 하며 작업한 흔적이 느껴진다. 아쉬움은 타이포그래피의 정교함이다. 변형체와 행간의 여유와 자간의 여유를 조금 더 고려했다면, 더 좋은 생각을 하게 되는 아쉬움이 든다. 많은 대중에게 익숙하지 않은 헤어 브랜드샵으로 많은 내용을 보여주려고 한 탓일까? 꽉 찬 콘텐츠로 인하여 눈 트임과 여백의 공간에 대하여 미련이 남는다.
-
레이아웃 - 플렉시블그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 70%, CSS폰트 30% / 컬러 - 통합 컬러

nas story
KIA
박선유 학생

기아자동차 브랜드의 시승체험센터 마이크로 사이트다. 컨셉은, 시승체험이라는 주제를 갖고 풀어갔다. UI 인터페이스는, 하단 부분의 핸들 GNB로 원하는 섹션 페이지로 넘어가게 된다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠에서도 가장 인상적인 부분은 메인화면에서는 Custom Typography이다. 아무리 타이포가 멋지더라도 가독성 또한 중요하다.
이미지와의 결합이든 독립형 아트웍과의 결합이든, 사용자가 한눈에 당신이 말하고자 하는 것을 정확히 이해할 수 있도록 하는 게 중요한 것처럼 ROAD TRIP는 기아의 시승체험센터를 표현하기에 가장 적합한 형태를 보인다. 콘텐츠는 입체단을 활용하여 3D 느낌을 표현하고 있으며, 보여주는 정보 영역 부분도 도표, 그래프 등 최대한 간결하게 내용 전달에 초점을 맞추었다.

섹션의 그리드로는 혼합 그리드를 이용하며, 보정을 통하여 증강현실 비주얼 스킬 표현방식으로도 이루어졌다. 재치있는 로딩 애니메이션으로 각 섹션 이동 시 기아의 아이덴티티 컬러로 이루어진 셔터가 내려가고 올라가는 부분과 events 페이지에서는 탑 앵글의 기점으로 비춰주고 있기에 시승을 통해 달리는 모습을 보여주는 느낌 또한 자아낸다. 고객 경험관리(CX: customer experience)까지도 고려하며 만들었지만, 아직 완벽한 완성작이 아닌 부분이 안타깝다.
-
레이아웃 - 단그리드, 혼합그리드 / 타이포그래피 - 이미지폰트 50%, CSS폰트 50% / 컬러 - 아이덴티티 컬러