슬로워크에서 제가 속한 컨버전스디자인팀의 KPI는 풀스택 디자이너(Full-stack designer)되기입니다. 그래서 디자인을 제외하고 가장 관심있는 웹기획을 스터디했고, 내/외부 프로젝트 스토리보드를 제작하면서 직접적인 경험을 하고 있습니다. 이 경험을 통해 배운 스토리보드 제작 전 프리핸드 스케치의 필요성을 공유합니다.



스토리보드? 프리핸드 스케치?


1. 스토리보드


진행중인 내부 프로젝트의 스토리보드


스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야 할 작업지시서로, 고객의 의뢰에 따른 머리 속의 비즈니스 모델을 표현하는 것입니다.


2. 프리핸드 스케치


진행중인 내부 프로젝트의 프리핸드 스케치


프리핸드 스케치는 말그대로 연필 등의 도구로 스케치하는 작업으로, 스토리보드 제작을 위한 사전 작업입니다. 고객의 니즈와 자신의 경험 또는 벤치마킹한 내용을 구체화해서 제작에 필요한 규칙, 범위 등을 미리 설정하여 스토리보드 작성의 완성도를 높이고 작업자(디자이너, 개발자, 퍼블리셔) 간의 원활한 의사소통을 위해 실시하는 작업입니다.



프리핸드 스케치가 효율적인 이유


1. 시간 절약

대화로 이해되지 않는 부분을 스케치를 통해 좀 더 정확하게 전달할 수 있습니다.

실제로 말로 표현할 때는 형태, 색상, 크기, 기능 등의 요소가 빠지기 때문에 같은 단어라도 작업자가 이해하는 것과 고객이 이해하는 것은 다를 수 있습니다. 그렇기 때문에 스케치 과정에서 빠르게 오점을 찾아내어 정리할 수 있고, 스토리보드 제작 시간을 단축할 수 있습니다.


2. 큰 구조 파악
제작될 산출물의 개념부터 전략과 전술 등의 핵심 주제 논의를 통해 제작되는 산출물이 왜 만들어지고 그것을 통해 고객이 어떤 핵심 서비스를 받게 되는지 등의 전체적인 서비스의 큰 그림을 스케치를 통해 전개해 나갈 수 있습니다. 이러한 생각 공유를 통해 하나의 목표 지점에 도달할 수 있습니다. 쇼핑몰 구축을 예로 들면, 기능 결정이 화면 UI/UX 구조에 많은 영향을 끼칠 수 있습니다.


검색 중심의 고객 니즈에 부합하지 않은 카테고리 중심의 홈페이지(29cm)


검색 중심의 고객 니즈에 부합하는 홈페이지(쿠팡)


29cm는 커머스와 다르게 브랜드와 스토리 중심으로 집중하고 고민하는 온라인 쇼핑몰이고, 쿠팡은 검색 중심의 쇼핑몰로 제품 판매에 포커스를 맞추고 있습니다. 만일 고객 니즈가 검색 중심의 화면(쿠팡)인데 작업 전 사전에 충분히 토론이 되지 않으면 산출물이 고객 니즈와 부합하지 않은 엉뚱한 방향(29cm)으로 흐를 수 있습니다. 개념 파악에서 결정된 사항은 서비스의 중심 뼈대이므로 중간에 변경되어서는 안 된다는 점을 협업하는 작업자 및 고객과 공유해야 합니다. 또한, 변경 사항 및 생각이 다른 부분을 최대한 빠르게 찾아내어 결정하고 진행해야 합니다.


3. 스토리텔링

스토리보드와 다르게 프리핸드 스케치는 빠르게 하나하나의 화면 구조를 정리하고 그곳에서 이뤄지는 이동 경로를 전개해 제작물의 큰 흐름을 파악하는 최적의 도구라 할 수 있습니다.


프리핸드 스케치에서 화면의 구조뿐만 아니라 네이밍, 문구, 기능, 링크, 예상치 못한 고객의 돌발 행동 등을 정의하여 다룰 수 있습니다. 프리핸드 스케치 작업을 거치지 않은 채 바로 스토리보드 작업을 진행하는 경우가 많은데, 머리 속에 있는 혼돈의 경험을 바로 스토리보드로 제작하면 원활한 의사소통뿐만 아니라 정교한 화면설계를 할 수 없습니다.


그렇다면 프리핸드 스케치는 어떻게 하는 걸까요? 몇 가지 팁을 공유합니다.



프리핸드 스케치 제작 팁


1. 그리는 데에 너무 많은 시간을 소요하지 마세요.

예쁘게 그릴 필요가 없습니다. 상대방이 충분히 알아볼 수 있는 정도의 화면으로 주요 구조, 핵심 기능, 내용을 기재하면 됩니다.


2. 스토리를 그리세요.

화면 이동 흐름을 화살표로 그리고 다음 화면을 간단하게 연결해 나가세요. 그러면 전체적인 화면의 로직을 확인할 수 있습니다.


3. 치환, 생략을 이용하세요.

알고 있는 기능이나 개념은 생략해도 됩니다. 어차피 스토리보드를 제작할 때 정교하게 다뤄지므로 영역 표시 및 간략한 기술로 마무리하세요.


프리핸드 스케치란 머리 속에 상상하고 있는 이미지를 그림으로 제작하는 것이 아니라, 그림을 통해 점차 완성도가 높은 이미지를 만드는 것을 의미합니다. 스케치는 미래도시, 웃음짓는 사람들, 파괴된 도시 등과 같이 컴퓨터로도 표현할 수 없는 이미지를 형상화할 수 있습니다.


프리핸드 스케치가 스토리보드로 제작된 화면

이제 스토리보드 작업을 하기 전에 간단한 스케치 과정을 거쳐 보세요. 좀 더 쉽고 효과적으로 화면 기획을 할 수 있을 것입니다.


제가 속한 슬로워크 컨버전스디자인팀에서 UI디자이너를 채용하고 있습니다. 저와 함께 풀스택 디자이너로 발전할 분을 찾습니다.





Posted by slowalk



2016년 슬로워크 블로그에서는 어떤 글이 가장 인기 있었을까요? 주로 실용적인 정보나 트렌드를 다룬 콘텐츠가 많은 사랑을 받았는데요. 지난 1년간 가장 페이지뷰가 높았던 베스트 글 5를 소개합니다. 특별히 각 콘텐츠 글쓴이의 소감 및 코멘트도 받아두었으니 함께 살펴보세요!



5위. 비디자이너의 얕은 지식 쌓기: 디자인 용어 20


디자이너에게는 너무나도 기본적인 개념들. 디자이너가 아니면 모릅니다. 디자이너와 함께 일하는 기획자, 에디터, 마케터라면 한 번 정리해보세요.


글 바로가기(링크)


"제 글이 5위라니, 영광입니다! 실제로 디자이너와 작업하면서 ‘커닝(kerning)'이라는, 전혀 모르는 말을 듣고 이 주제를 생각했어요. 많은 분들이 봐주신 걸 보니 ‘내가 모르는 건 다른 사람들도 잘 모를 거다’ 라는 막연한 추측이 맞았던 것 같네요. 비디자이너 여러분 힘내시고요. 앞으로도 디자이너와 즐겁게 신나게 프로답게 협업하시길 바랍니다."

- 오수희, UU팀 에디터



4위. 인쇄 후가공, 어떤 것들이 있을까?


친구와 찍던 스티커 사진에 입힌 무광/유광/반짝이 코팅도 ‘후가공’의 일종입니다. 본 적은 있지만 이름은 모르는 후가공, 이 글을 통해 마스터해보세요.


글 바로가기(링크)


"좋아해주셔서 감사합니다(금박). 저는 작업하면서 많이 접하는 용어이지만 고객들에게는 생소할 수 있다고 생각해서 작성했는데요. 디자이너가 아닌 분들 입장에서는 특이한 인쇄물에 대해 쉽게 이해할 수 있었던 것 같습니다. 특히 말로만 들어 궁금했던 후가공을 예시 사진으로 직접 이해하는 것이 포인트입니다. 인쇄물은 목적과 특성에 맞는 후가공으로 더 좋은 결과물을 낼 수 있습니다. 돈값하는 후가공, 적극 이용해봅시다. ^^"

- 김영희, X-O팀 디자이너



3위. 슬랙봇으로 슬랙 200% 활용하기


업무용 메신저로 Slack을 사용하고 있나요? 나의 일을 슬랙봇에게 맡기고 중요한 업무에 더 많은 시간을 사용하세요.


글 바로가기(링크)


"브랜드관리위원회 위원장으로서 체면이 서네요. 다른 협업 메신저와 슬랙이 가장 차별화되는 지점이 다양한 슬랙봇이라고 봅니다. 슬랙을 처음 사용할 때부터 여러 봇을 사용해 봤고, 그 경험으로 글을 쓴 것이기 때문에 많은 분들이 좋아해주신 것 같습니다. 다만 마지막에 “여러분이 사용하는 유용한 슬랙봇이 있다면 제보해주세요!”라고 적었는데 아무도 제보를 해주지 않으셔서 약간 마음에 상처를 입었습니다."

- 조성도, 스티비 총괄



2위. 디자이너가 알아야 할 플랫 디자인 개론


플랫 디자인은 2012년부터 유행하기 시작했습니다. 그리고 지난 몇 년 간, 디자이너들은 플랫 디자인의 장단점을 파악하여 적절하게 스타일을 발전시켜 왔습니다. 플랫 디자인의 장단점과 미래에 대한 단서를 찾아보세요.


글 바로가기(링크)


"이 영광은 원작자인 제니(Janie Kliever)에게 돌립니다. 아무래도 플랫디자인의 트렌드가 계속되고 있기도 하고 마침 구글 머티리얼 디자인이 등장한 것도 글의 인기에 한 몫을 한 것 같습니다('개론'이라는 제목에 낚이신 것 같기도…). 실제 예시로 나오는 장단점과 디자이너들의 실수가 설명을 상당 부분 도우니 놓치지 마세요(잔인한 제니…). 저도 배우는 입장입니다. 앞으로도 같이 배워요."

- 최선주, 뭐든지 스튜디오 기획자



1위. 2016 꼭 알아야 할 웹 디자인 트렌드


대망의 1위는! 2016년 꼭 알아야 할 웹디자인 트렌드를 소개한 글입니다. 사용자에게 최선이 무엇인지 먼저 생각해보고 트렌드를 따를지 결정하는 게 중요하다고 하는군요.


글 바로가기(링크)


"부족함이 넘치는 글인데 클릭해주셔서 감사합니다. 최근엔 트렌드라는 것이 작년과 올해가 확연히 다르지는 않다고 생각합니다. 그냥 흐름에 몸을 맡기고 흐름의 파악을 잃지 않는 정도로 참고해주시면 좋겠습니다. 분발하여 내년에도 양질의 글로 찾아뵙겠습니다."

- 오예슬, 01팀 개발자



한 해 동안 슬로워크 블로그에 보내주신 관심과 성원에 감사합니다. 2017년에도 더욱 풍성하고 다양한 콘텐츠로 찾아뵙겠습니다!

Posted by slowalk


아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다.

아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다.



기존의 아름다운가게 홈페이지


아름다운가게 리뉴얼 방향성 및 목표

1. 메인 페이지에서 다양한 콘텐츠를 노출

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

4. 직관적인 디자인을 통해 웹사이트 사용성 제고

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화


이 방향을 다음과 같이 적용하여 리뉴얼 작업을 진행했습니다.



1. 메인 페이지에서 다양한 콘텐츠를 노출


대부분 웹사이트의 메인 페이지에서는 큰 사이즈의 메인 배너를 사용하는 것이 아직까지 일반적입니다. 하지만 아름다운가게는 콘텐츠를 다양하게 보여줄 방법을 고민했습니다. 이에 따라, 메인 배너 기능을 하는 요소와 다양한 콘텐츠를 함께 노출하기로 했습니다.


초기 기획안과 (moqups 툴 사용, 관련 내용 더 보기)  실제 운영 중인 현재 메인 페이지 비교


주로 글과 사진으로 이루어진 콘텐츠 중심의 배열로 메인 페이지의 기획안이 확정되었고, 이를 기반으로 다양한 디자인 시안이 오갔습니다. 그 결과 현재 아름다운가게의 메인 페이지는 콘텐츠 위주의 생동감 있는 메인 형태를 취하고 있습니다.



2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달



아름다운가게의 CI는 잎들이 모여 꽃이 된 형태입니다. 이 형태는 나보다 우리를 먼저 생각하고 환경을 지키기 위한 다섯 가지 실천(기증, 되살림, 윤리적소비, 자원활동, 나눔활동)의 상징으로, 나눔과 순환을 소중히 여기는 그물코정신과 되살림정신을 내포하고 있습니다. 특별히 아름다운가게의 색상인 연두색(mild green)은 생명과 환경, 미래와 희망을 상징합니다. 이 메인 색상을 웹사이트에 전면적으로 통일되게 사용함으로써 아이덴티티를 확실하게 전달했습니다.


아름다운가게 주요 컬러가 사용된 아이콘 디자인 예시



3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성



아름다운가게는 여러 패밀리 사이트를 가지고 있습니다. 그 중에서도 자원활동, 나눔교육, 사회적기업센터, 인재채용 페이지는 더욱 중요한데요. 해당 페이지들이 메인 사이트와 함께 한눈에 보이면서도 접근하기 쉽도록 초점을 맞추었습니다. 상단 바에 각 패밀리 사이트들로 이동할 수 있는 탭 구조를 만들었습니다. 이를 통해 메인 사이트와 패밀리 사이트 간에 이동이 자유롭게, 또한 언제든 메인 사이트로 돌아올 수 있게 되었습니다. 또한 다른 패밀리 사이트들은 셀렉트 박스를 통해 이동할 수 있게 상단에 패밀리 사이트들을 배치해 사용성을 높였습니다.



4.  직관적인 디자인을 통해 웹사이트 사용성 제고


아름다운가게 웹사이트 리뉴얼 작업에서 가장 중점적으로 고려한 포인트는 ‘사용성을 높인다’라는 점이었습니다. 다양하고 많은 정보를 가지고 있는 사이트이기 때문에 메뉴 구조부터 디자인까지 복잡하기보다는 심플하고 간결하게 혼란을 주지 않는 것이 중요했습니다. 사이트를 이용하는 연령대와 주 사용자를 고려해 최대한 직관적이고 쉽게 사이트를 이용할 수 있도록 하는 것입니다.


이에 따라, IA(Information Architecture)를 구성할 때 사용자들이 메뉴명만 보고도 어디로 이동할지 고민하지 않고 예측할 수 있도록 메뉴명을 조금씩 변경했습니다. 변경한 사업소개 하위 메뉴명으로, 아름다운가게의 사업을 한 페이지에서 볼 수 있는 ‘사업 한눈에 보기’와 연혁을 대신한 ‘걸어온 길’ 등이 있습니다.


또한, 각 하위 메뉴가 많은 상위 메뉴에는 게이트 페이지를 두어 각 메뉴들에 대한 설명과 어느 페이지로 이동해야 내가 원하는 정보를 얻을 수 있는지 간편히 볼 수 있게 하였습니다. 각 게이트 페이지에서는 하위 메뉴들의 간단한 소개와 사진을 통해 해당 메뉴를 사용자가 인지할 수 있습니다.



5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화



아름다운가게에서 주요한 참여 방법은 매장에 기부하거나 매장에 방문해 물건을 구입하는 것입니다. 그렇기 때문에 ‘매장찾기’ 메뉴가 사이트 내에서 가장 중요한 역할을 하게 되었습니다. 따라서 매장찾기를 메뉴 중에서도 가장 우선순위에 두어 어떤 사용자가 보더라도 쉽게 눌러보고 확인할 수 있게 유도하였습니다. 또한, 현재 내 위치를 중심으로 가까운 매장을 찾을 수 있고, 검색을 통해서도 매장을 쉽게 찾을 수 있게 했습니다. 지도 위에 매장을 위치를 바로 보여주어 정확성 또한 높였습니다. 해당 매장에 대한 자세한 정보는 팝업 창으로 뜨고 공유, 인쇄하기도 간편하게 구성했습니다. 매장찾기 메뉴를 구성하면서 사용성 테스트를 함께 진행하여 사용자가 원하는 정보와 구성을 최적으로 찾을 수 있었습니다.



아름다운가게 웹사이트 리뉴얼은 킥오프미팅부터 메인 사이트 오픈까지 10개월의 기간이 걸렸습니다. 그만큼 완성도와 사용성에 중점을 두었고, 웹사이트 리뉴얼 이벤트 진행 당시 사용성이 높아졌다는 후기를 받으며 성공적으로 운영하고 있습니다. 리뉴얼한 아름다운가게 웹사이트, 지금 방문해보세요!


by 양 발자국


Posted by slowalk


슬로워크는 작년 2015년부터 대학생 디자인 캠프 slo20을 진행하고 있습니다. 


slo20이란 디자인 주니어와 슬로워크 전문가의 만남으로, 디자인 워크숍(1주)와 실무 인턴십(9주)을 통해 디자인 실력을 향상시킬 수 있는 기회를 주고 있습니다. 작년 상반기, 하반기 2번의 slo20을 진행했습니다. 오늘은 2015년 하반기 slo20 웹개발실 디자인 인턴을 진행한 고양이 발자국의 생생후기를 통해 slo20에 대해 자세히 알려드립니다.



실무 인턴십 수행 전, 디자인 워크숍을 진행 중인 낙타발자국님과 slo20 고양이 발자국님


slo20은 실무 인턴십을 진행하기 전, 1주간 디자인 워크숍을 진행합니다. 이 워크숍에서는 실무에서 진행하게 될 디자인 업무 교육뿐만 아니라 전반적인 실무를 진행할 수 있는 회사 내 커뮤니케이션 방법, 부서 내 프로젝트 진행방법 등 대해 다양한 범위의 교육을 진행하고 있습니다. 





Q. slo20에 지원하게 된 계기가 있나요?


A. 웹 디자인과 UX에 관심이 많아서 교육과 같이 진행되는 인턴 프로그램이 있다는 것을 알고 있어서 지원하게 되었습니다. 학생이라 부족한 점이 많을 것으로 생각했는데 교육을 통해 실무를 함께 병행할 수 있다는 점이 지원을 결심하게 된 가장 큰 계기이고 장점으로 작용했습니다.




Q. slo20 면접 과정은 어땠나요?


A. 저에게는 첫 면접이었고, 다대다 면접으로 진행되었습니다. 면접관으로 들어오신 슬로워커 분들의 회사의 진행 상황과 프로젝트의 진행방향에 대해 자신감 있게 소개해주시는 모습에 꼭 함께 일해보고 싶다는 마음이 생겼습니다. 너무 떨렸지만, 최대한 면접자들을 편하게 대해주시려고 하는 모습이 기억에 남습니다. 딱딱하고 형식적인 질문이 아닌 디자인 자체와 인성 질문을 받게 되어 스스로 평소 생각하던 것을 솔직하게 대답하였습니다. 또한, 면접이 끝난 후에도 디자인에 대한 생각과 스스로에 대해 생각해 볼 수 있었습니다. 




Q. slo20 프로그램이 경험과 실력향상에 도움이 많이 되었나요?


A. 대학교 4학년 졸업반이라 진로 등에 많은 고민이 있었는데, 모르는 게 있는지 먼저 물어봐 주시고 그 점에 대해 바로 다시 설명해주시는 방식으로 진행되어 실무 일을 처음 접하는데도 어렵지 않았습니다. 실제 진행되는 프로젝트에 투입되어 일을 진행하여 큰 도움이 되었습니다.




Q. 실무를 진행하면서 아쉬웠던 점이 있나요?


A. 초반에는 아쉽다고 느껴졌지만 빠른 해결이 되었던 것이 있습니다. 프로젝트에 실제로 함께 참여하게 되면서 많은 PC 웹 작업을 진행하였는데 모바일에 대한 이해가 스스로 부족하다고 생각하였습니다. 그래서 이러한 부분을 말씀드렸더니 실제 PC/Mobile 작업을 함께 진행했던 프로젝트에 대한 설명을 해주시고 모바일 버전에서의 작업 방식을 상세하게 알려주셨습니다. 모바일 작업 시 가이드라인 잡는 법, 버튼의 크기, 가독성이 높은 폰트의 크기 등에 대한 이해가 높아졌고, 실제 모바일 작업에도 함께 참여할 수 있게 기회를 주셔서 제가 부족하다고 느꼈던 부분을 채워나갈 수 있었습니다. 평소에도 사소한 팁, 정보들도 항상 공유해주시고 관심 있는 부분을 먼저 물어봐 주시고 그 작업을 함께해나갈 수 있게 배려해주셨습니다. 점심시간 등에 가볍게 조언해주신 부분도 저에게는 큰 도움이 되었습니다. 




Q. slo20이 향후 취업에 도움이 될 것 같나요?


A. 많은 도움이 될 것 같습니다.

다른 곳에서는 인턴이라고 하여도 실 프로젝트를 진행하지 않거나 아르바이트를 하는 느낌이었는데 슬로워크는 기간에 비해 많은 프로젝트를 진행할 수 있어서 좋았습니다. 많은 경험을 쌓을 수 있게 도와주셔서 이번 계기로 포트폴리오를 어떻게 발전시킬 수 있을지도 방향성을 잡아나갔습니다. 특히 디자인 전문가분들과 함께 일하고 경력을 쌓을 수 있다는 점이 좋았습니다. slo20 프로그램을 통해 취직에 도움이 될 뿐만 아니라 너무나 좋은 경험과 추억으로 남을 것 같습니다.




Q. 마지막으로 슬로워크 slo20에 대해 한마디 부탁드려요.


A. 인턴이지만 첫 회사생활이였는데 슬로워크만이 가진 자유로운 분위기와 수평적인 구조에서 편하고 따뜻하게 일할 수 있어서 너무 감사했습니다. 특히나 기억에 남는 것은 호칭입니다. 슬로워크는 직급과 상관없이 ~님으로 서로를 부르는데 인턴인 저도 거리감을 느끼지 않고 서로를 존중하는 느낌을 받아 가장 기억에 남습니다. 어렵게만 느껴졌던 회사생활을 앞으로 자신감있게 해나갈 수 있을 것 같습니다. 첫 시작이 `슬로워크` 라서 너무 좋았습니다. 다른 후배들, 친구들에게 적극적으로 추천하고 싶을 정도로 slo20은 저에게 있어 너무나 뜻깊은 경험이었습니다. 




슬로워크 웹 개발실에서 웹디자인 인턴으로 두 달간 저희에게 밝고 긍정적인 기운을 전해주고 간 고양이 발자국님! 슬로워커들도 고양이 발자국님과 함께 일하면서 뭐든지 배우고자 하는 자세를 보고 저희도 좋은 기억으로 남아있습니다. 다시 한번 웹개발실에서 slo20을 훌륭하게 마쳐주신 고양이 발자국님께 감사드립니다.



by 양 발자국



* 참고: 2016년 slo20 운영계획은 아직 확정되지 않았습니다. 관련 문의는 recruit@slowalk.co.kr 로 해주세요. 





Posted by slowalk

황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 디자인에서 황금비율을 이용할 수 있는 팁을 소개합니다.  





두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 아래의 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다. (2016.01.14 수정)





황금비율을 가장 간단하게 적용하는 방법은 화면이나 종이를 구성하는 그리드를 황금비율로 나누는 것입니다. 특히 단 구분이 중요한 웹디자인에서는 더 유용하게 쓰일 수 있는데요, 가로 960픽셀의 화면을 1.6:1의 비율로 나누게 된다면 각각 594픽셀, 366픽셀로 나눌 수 있습니다. 메인 영역과 사이드 영역의 구분이 안정되어 보입니다. 





메인과 서브의 영역이 황금비율과 거의 유사한 비율로 나뉘어 깔끔하고 정돈된 느낌을 주는 내셔널 지오그래피의 웹사이트입니다. 





화면을 가로로 구분할 때에도 역시 황금비율을 이용할 수 있습니다. 원페이지로 화면을 구성할 때에, 메인 영역과 사이드 혹은 푸터 영역을 황금비율로 구성할 수 있을 것입니다. 






피보나치 수열로 만들어진 황금나선을 이용하는 방법도 있습니다. 디자인 스튜디오 Moodley가 디자인 한 아트페스티벌의 브로셔는 로고와 이미지가 충분한 여백과 함께 황금나선을 따라 적절히 배치되어 시각적인 안정감을 줍니다.





트위터의 웹 화면 또한 나선형 그리드로 화면이 구성되어 있습니다. 메인 콘텐츠 영역과 좌측 사이드의 각 영역이 황금비율로 나누어져 중요도에 따라 사용자의 시각적인 흐름을 유도합니다. 





이 외에 2/3법칙(Rule of thirds)은 황금비율과 유사하며 쉽게 그리드를 나눌 수 있는 방법입니다. 이는 화면을 가로 3등분, 세로3등분으로 동일하게 분할하는 것인데요, 카메라로 사진을 찍을 때 이 그리드 안에서 피사체를 중앙의 코너에 배치하는 이유 또한 유사한 원리라고 할 수 있습니다. 





여백과 이미지, 그래픽 요소가 9등분 안에서 조화롭게 배치된 표지 디자인입니다. 정중앙에 배치된 타이틀과 중앙을 향한 모델의 시선은 시각적인 균형감과 안정감을 줍니다.





웹디자인에서도 같은 원리를 이용할 수 있습니다.  화면을 응시할 때 우리의 눈은 왼쪽에서 오른쪽, 위에서 아래의 방향으로 시선이 이동한다고 합니다. 일반적으로 로고가 상단 좌측에 위치하는 것은 바로 이런 이유입니다. 9개의 영역에서 헤더와 푸터, 메인 콘텐츠와 서브 콘텐츠를 이 원리에 따라 적절히 구성하면 좋습니다.





 

폰트 크기를 적용할 때에도 황금비율을 이용할 수 있는데요, 타이틀과 서브타이틀, 그리고 본문의 글자 크기를 정할 때 황금비율을 이용한다면 시각적으로 균형된 문단을 구성할 수 있습니다. 웹에서의 텍스트 크기를 황금비율로 구성해주는 사이트(http://www.pearsonified.com/typography/)를 이용해도 좋습니다. 본문의 텍스트 크기를 입력하면 이에 맞는 타이틀, 서브타이틀 등의 크기를 보여줍니다.

 




황금비율은 어디까지나 참고사항입니다. 모든 디자인에 이 황금비율을 적용할 필요는 없지만, 오랜 시간동안 우리의 눈에 가장 익숙하고 역사적으로 검증된 자연의 산물인 황금비율을 디자인에 이용해 보는 건 어떨까 싶습니다.



출처 : canvafastcodesign, tutsplus, creativebloq

by 소금쟁이 발자국



(광고)


Posted by slowalk

최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다.





1. UI 패턴의 증식

반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. 


Cypress North


그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다.

즉, 체크아웃은 체크아웃이고 그 자체의 역할을 합니다. 로그인 모델도 마찬가지입니다. 휠 UI를 재발견할 다른 이유는 없습니다. UI 패턴은 매끄러운 경험을 통해 사용자를 안내합니다. 


몇 가지 친숙한 패턴에 대해 살펴보겠습니다. 


햄버거 메뉴 

약간의 비판이 있긴 하지만, 햄버거 메뉴를 광범위하게 사용하면 사용자들이 기능을 쉽게 인식할 수 있다는 것이 분명합니다.


Silenza


계정 등록

사이트에 가입할 때 볼 수 있는 패턴입니다. 정보를 입력하는 부분이나 소셜 계정의 로그인을 이용하는 버튼이 있을 것입니다. 여러 단계로 나눠진 폼 마법사는 필수 항목을 확인하고 다음 단계로 넘어가기 때문에, 사용자가 가입 프로세스를 잘 통과할 수 있도록 만듭니다. 


Typeform


긴 스크롤

대부분의 사람들은 모바일 기기 덕분에 긴 스크롤에 익숙합니다. 이 기술은 스토리텔링을 통해 사용자들을 이끄는 사이트에 특히 잘 어울립니다. 또한 특정 섹션으로의 스크롤로 멀티 페이지 사이트를 흉내 낼 수 있습니다.


Vimeo


카드 레이아웃

핀터레스트가 사용한 카드 패턴은, 정보를 훑어보기에 적절한 크기로 보여주기 때문에 많이 사용됩니다. 각 카드는 하나의 통합된 개념을 나타냅니다. 직사각형 형태의 카드는 '콘텐츠 컨테이너'로서, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.


TheNextWeb


대표 이미지

시각은 가장 강력한 인간의 감각이기 때문에, 고화질의 대표 이미지는 사용자의 시선을 사로잡는 가장 빠른 방법 중 하나입니다. 대역폭과 데이터 압축 기술의 발전 덕분에 사용자들은 긴 로딩 시간에 고생하지 않아도 됩니다. 스크롤 상단에 대표 이미지가 있고, 그 아래 지그재그 섹션이나 카드를 나열하는 것이 일반적인 레이아웃입니다.


Maaemo



(광고)



2. 풍부한 애니메이션

애니메이션은 사이트의 스토리텔링, 더 많은 상호작용이나 즐거운 경험을 주기 위해 점점 더 많이 사용되고 있습니다. 

하지만 아무 곳에나 애니메이션을 넣을 수는 없습니다. 사이트의 이야기 요소와 특성에 애니메이션을 추가할지의 여부를 신중하게 고려해야 합니다. 애니메이션에 대해 다음의 두 가지 관점으로 생각해볼 수 있습니다.


- 대규모 애니메이션 : 페럴렉스 스크롤링이나 팝업 알림과 같은 효과를 포함하며, 사용자에게 좀 더 영향을 미칠 기본적인 인터렉션 도구로써 사용됩니다. 

- 작은 규모의 애니메이션 : 스피너, hover 도구 및 로딩 바를 포함하며, 사용자 입력이 필요하지 않습니다.


가장 인기 있는 애니메이션에 대해 알아보겠습니다.


로딩 애니메이션

로딩 애니메이션을 보면서 사용자는 즐겁거나 기쁨을 느낄 수도 있고 반대로 지루함을 느낄 수도 있습니다. 로딩 애니메이션은 주로 플랫한 디자인, 미니멀리즘, 포트폴리오나 싱글 페이지 사이트에 사용됩니다.


Slack via Lauren Tan


로딩 애니메이션은 되도록 단순하게 만들고 사운드를 넣지 마세요. 사이트의 특성이나 주요 컬러와도 잘 어울려야 합니다.


네비게이션과 메뉴

숨겨진 네비게이션 메뉴는 화면 공간을 절약할 수 있어서 더욱 더 인기가 많아지고 있습니다. 특정 버튼을 클릭하여 메뉴를 드러낼 때, 어색한 전환을 막기 위해 애니메이션을 사용합니다.


갤러리와 슬라이드쇼

갤러리 및 슬라이드 쇼는 사용자의 과부하 없이 여러 이미지를 보여줄 수 있는 효과적인 방법입니다. 사진 사이트, 제품 쇼케이스, 포트폴리오 사이트에 중요합니다.


Born Fighter


모션 애니메이션 

움직임은 사용자의 주의를 집중시키는 훌륭한 도구입니다. 움직임은 시각적 계층을 만드는데도 효과적이며, 입력 폼과 메뉴, 사용자의 행동을 유도하는 요소에 적용하면 사용자의 눈길을 끌 수 있습니다.


Bugaboo


스크롤

부드러운 스크롤에는 애니메이션이 필요합니다. 사용자의 스크롤 조작으로 애니메이션이 펼쳐지는 속도가 달라질 수 있습니다.


Squarespace


배경 애니메이션/비디오

단순한 애니메이션 배경은 사이트에 가시성을 더할 수 있지만, 산만할 수 있기 때문에 적당히 사용되어야 합니다. 개별 섹션이나 전체 이미지의 부드러운 움직임을 만드는 데에 사용하는 것이 중요합니다.


Dunckelfeld



3. 마이크로 인터렉션(Microinteractions)

휴대전화의 알림을 끄는 것에서부터 페이스북의 고양이 사진에 좋아요를 누르는 것까지, 마이크로 인터렉션은 우리 주변 곳곳에 있습니다. 


Slack


마이크로 인터렉션은 상태나 피드백을 전달하거나 행동의 결과를 보여주고 사용자가 무언가를 조작하는 데에 도움을 줍니다. 마이크로 인터렉션은 모든 어플리케이션에서 중요한 부분입니다.



4. 머터리얼 디자인(Material Design)

구글은 머터리얼 디자인이라는 새로운 스타일의 언어를 출시했습니다. 이는 더 현실적인 디자인을 위해 깊이와 움직임의 개념, 그림자 효과를 사용합니다.


Google Now


머터리얼 디자인의 목표는 UX 중심의 깔끔하고 현대적인 디자인을 만드는 것입니다. 미니멀한 모습에서 다른 트렌드인 플랫 디자인과 공통점이 많아보이지만, 머터리얼 디자인은 순수한 플랫 디자인보다 더 많은 깊이와 그림자를 사용합니다. 

지난 6월 구글은 웹사이트에 적합한 Material Design Lite를 발표했습니다. Lite는 vanilla CSS, HTML, JavaScript 를 사용하며, 웹 사이트에 머터리얼 디자인의 모습과 느낌을 간단하게 추가할 수 있습니다.



5. 반응형 디자인

최근 몇 년 동안 모바일 인터넷 사용의 증가로 반응형 웹 디자인은 여전히 인기를 끌고 있습니다.


UXPin


모든 기능을 갖춘 모바일 친화적인 사이트를 구축하는 것이 비교적 간단하고 저렴할 수 있습니다. 그러나 적절히 수행하지 못할 경우, 퍼포먼스와 관련하여 몇 가지 문제가 있을 수 있습니다. 최상의 반응형 퍼포먼스를 위해 Guy's Pod의 가이드를 참고해보세요.

반응형 디자인은 유용하지만, 좋은 UX를 제공하기 위해 속도를 개선하는 등의 노력과 고민이 필요합니다.



6. 플랫 디자인 (Flat Design)

플랫 디자인은 미니멀리즘, 반응형 웹 디자인, 머터리얼 디자인과 같은 다른 트렌드와 인기를 함께하고 있습니다.


Beoplay


앞으로 플랫 디자인에서는 다음과 같은 트렌드를 볼 수 있습니다.


- 긴 그림자 : 평면 디자인에 깊이를 더해 줄 것입니다.

- 생기가 넘치는 컬러 : 인기있는 UI 프레임워크와 템플릿은 더 생동감 있는 컬러를 사용하고 있습니다. 

- 간결한 타이포그라피 : 플랫 디자인에서 간결한 타입페이스는 텍스트의 가독성을 높여줄 것입니다.

- 고스트 버튼 : UX 측면에서 산만하지 않고, 사용자가 가리켰을 때 클릭할 수 있는 링크를 보여주어 기능을 수행할 수 있도록 합니다.  

- 미니멀리즘 : 신선하고 깔끔한 UI를 위해 요소의 수를 줄이는 시도가 보입니다.



지금까지 2016년의 웹 디자인 동향 6가지를 살펴보았습니다. 2015년과 크게 다른 흐름은 아니지만 그 안의 작은 요소들이 조금씩 변하고 있는 것 같습니다. ‘힙한’ 트렌드라고 무작정 따라하지 마세요. 사용자에게 최선이 무엇인지 먼저 생각해보는 것이 중요합니다.



출처 : AWWWARDSDESIGN.CCIT WORLD


by 비숑 발자국



(광고)


Posted by slowalk



2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 

페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다.




10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기



웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다.




9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기



슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로 실행하는 글로벌 기업에서만 찾아볼 수 있는 직책인데요, 슬로워크의 지속가능성을 위한 CSO의 고민을 들어봅니다.




8위: 화장을 지운 인형, Tree Change Dolls! ➔ 더 읽기 



아이들이 가장 좋아하는 장난감은 아마 인형이 아닐까요? 화려한 화장을 한 인형은 비현실적인 미에 대한 선입견을 심어줄 수 있습니다. 호주의 한 아티스트는 아이들에게 각자의 개성과 매력이 진정한 아름다움임을 가르쳐주는 화장을 지운 인형을 만듭니다. 작가의 텀블러 페이지에서 화장을 지우기 전과 후의 모습을 확인해보세요.




7위: 출력과 인쇄, 무엇이 다를까? ➔ 더 읽기 



'출력하다'와 '인쇄하다'의 차이를 아시나요? 두 용어의 차이를 정의했습니다. '출력', '인쇄' 두 과정과 장단점을 인포그래픽을 제작했습니다. 인쇄물이 필요한 프로젝트 담당자라면 '출력'과 '인쇄' 중 어떤 방법이 더 적합한지 알 수 있습니다.




6위: 디자이너 부럽지 않은 인포그래픽 만들기 ➔ 더 읽기 



일러스트레이터나 포토샵과 같은 디자인 툴을 사용할 수 없어도 쉽게 인포그래픽을 제작할 수 있는 사이트를 소개합니다. 소개된 사이트를 통해 잘 만들어진 인포그래픽의 색상 구성, 차트 형태 등을 공부해보는 것도 더 좋은 인포그래픽 만들기 위한 하나의 방법입니다.




5위: 도시의 동물들을 위한 작은 표지판, #TINYROADSIGN ➔ 더 읽기 



도시는 사람 외에도 여러 생물이 공존하는 공간입니다. 우리가 여러 생물과 도시 공간을 공유함을 상기시키는 동물들을 위한 표지판을 소개합니다.




4위: 비영리단체를 위한 10가지 뉴스레터 팁 ➔ 더 읽기 



이메일 뉴스레터는 비영리 단체의 소식을 알리고 참여를 유도하는 매우 중요한 도구인데요, 그저 '하던 대로'가 아닌, 마케팅 효과를 얻을 수 있는 10가지 뉴스레터 제작 팁을 공유합니다.




3위: 리플릿, 어떻게 접는게 좋을까? ➔ 더 읽기 



디지털 마케팅이 증가하면서 종이로 만들어진 홍보물은 점차 줄어들고 있습니다. 두꺼운 제본 형식의 인쇄물보다는 한 장으로 이루어진 리플릿의 비중이 높아진다고 하는데요, 리플릿 기획 과정에서부터 반드시 고려해야 할 기본적인 접지 방법을 소개합니다. 디자이너가 아니더라도 리플릿을 의뢰하는 경우가 종종 있다면 꼭 읽어보세요. 더 효과적으로 정보를 전달할 수 있습니다.




2위: 웹디자인에서 자간, 행간에 대한 고찰 ➔ 더 읽기 



웹디자인에서 행간과 자간을 어떻게 다뤄야 할까요? CSS와 포토샵의 단위 차이를 이해하고 디자이너와 개발자 모두 만족하는 방법을 알아보세요.




1위: 디자이너가 아니어도 괜찮아! 글꼴 다루기 ➔ 더 읽기 



보고서, 기획서, 프레젠테이션 등 우리는 일상에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있는데요, 그 중 중요한 것은 글꼴입니다. 김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29는' 비디자이너도 보기 좋은 문서를 만들 수 있는 원리를 쉽게 설명하는데요, 몇 가지 유용한 팁을 공유합니다.




Posted by slowalk

UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.



1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.



UI의 9가지 상태 ➔ 더 읽기



2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.


모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기




UI디자인에서 버튼이나 메뉴는 다른 곳으로 향하는 '문'입니다. 버튼의 형태나 스타일만큼 중요한 것은 '문의 이름'입니다. 메뉴 버튼의 중요성과 적합한 메뉴명을 결정하는 요소를 알아봅니다.

클릭을 유도하는 이름 붙이기 ➔ 더 읽기




스크롤로 제어하는 원 페이지 구조가 등장하면서 세로형 내비게이션 메뉴도 많이 볼 수 있게 되었습니다. 웹사이트를 디자인할 때 사용하는 세로형 내비게이션이 무엇인지와 세로형 내비게이션 메뉴 활용법을 3단계로 나누어 알아봅니다.

웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 ➔ 더 읽기




사용자의 명령을 인식하거나 긴급 상황을 알리는 데 사용하는 모달 창 (Modal window)는 사용자의 작업 흐름을 흐트러트릴 수 있습니다. 그래서 모달 창 버튼의 색상 사용이 중요합니다. 모달 창 버튼의 3가지 성격에 맞는 색상 지정 방법을 알아봅니다.

버튼색상에도 정답이 있다 ➔ 더 읽기



6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.


스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기



7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.


모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기




8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.


새로운 UI로써의 No-UI ➔ 더 읽기





Posted by slowalk