logo

더 나은 미래를 위한 사회공헌 가치실현

사회공헌자료

?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files

※ Marc Hemeon의 「How to not suck at design, a 5 minute guide for the non-designer.」를 각색한 글입니다.

 


 디자인을 전문적으로 배우지는 않았지만 우리에게는 언제나 디자인이 급하게 필요한 순간이 있습니다. 그때마다 여러분은 어떻게 난관을 헤쳐나가시나요? 디자인에 대한 몇 가지 팁과 원칙들만 알면 누구나 디자인에 대한 어려움에서 벗어날 수 있는데요. 이번 시간 위시켓은 디자이너가 아니더라도 오늘 당장 사용해 볼 수 있는 실용적인 ‘디자인 가이드’를 소개해드리고자 합니다. 가장 기초적인 디자인 가이드이지만 잘 활용한다면 여러분도 전문 디자이너를 깜짝 놀라게 할 만큼 좋은 디자인을 생각해내실 수 있을 겁니다.

 

01. 대비를 충분히 활용하라.

출처: Apple Developer

 배경과 폰트의 색상은 눈이 피로해지지 않는 선에서 충분히 대비되어야 합니다. 일반적으로 대부분 문서가 흰색 배경에 검은색 글씨라는 걸 생각해보세요. 밝은 회색, 노란색, 녹색 등은 멀리하세요. 사람들이 글을 읽을 때, 눈을 가늘게 떠야 하는 불편함을 줄 수 있습니다.

02. 완전한 검은색보다는 검은색에 가까운 색이 더 읽기 쉽다.

 글자들의 색은 완전히 까만색보다는 #333333, RGB(51,51,51) 색을 사용해보세요. 흰 바탕에 완전히 까만색의 글씨는 눈에 피로감을 주어서 글자에 집중하기 어렵게 만듭니다.

 

03. 중요한 콘텐츠를 먼저 보여준다.

출처: Apple Developer

 가장 중요한 정보를 맨 앞에 보여주세요. 여러분의 앱이나 웹사이트에서 가장 중요한 용도가 무엇인지를 명확하게 보여주어야 합니다. 중요한 콘텐츠는 가장 먼저 보여야 합니다. 화면을 확대하거나 스크롤 하지 않고도 잘 보여야 합니다. 실제로 이런 원칙이 잘 적용된 사례를 살펴보겠습니다.

 

 아래의 왼쪽에서 보이는 인스타그램은 사용자가 포스팅하는 사진과 비디오에 분명하게 초점이 맞춰져 있습니다. 반대로 아래 오른쪽에 보이는 핀터레스트는 시각적으로 우선순위를 사용합니다. 검색창을 가장 위에 고정해놓고, 그 밑으로는 멋진 그리드가 놓여 있죠. 핀터레스트에서 검색창을 맨 위에 둔 것은 매우 의도적인 것입니다.

 

 

 검색은 핀터레스트 앱에서 핵심적인 기능입니다. 사람들은 검색하고 찾아보기 위해서 핀터레스트를 사용합니다. 두 가지 예를 더 살펴보겠습니다. 아래 왼쪽에 있는 스포티파이에서는 앨범의 커버 이미지와 노래 제목을 먼저 보여주고, 재생 관련 버튼은 그 밑에 있습니다.

 

 그리고 재생 관련 버튼 중에서도 스포티파이는 앞으로 감기와 뒤로 감기보다, 재생과 일시 정지 버튼이 더 크게 만들어져 있다는 걸 알 수 있습니다. 오른쪽에 보이는 페이스북은 인스타그램과 매우 비슷하게 보이는데 여러분의 친구가 올린 게시물을 맨 앞의 가운데에서 보여줍니다.

 

 

04. 모두 가지런하게 정렬한다.

출처: Apple Developer

 지저분하거나 디자인이 별로인 느낌을 없앨 수 있는 가장 손쉬운 방법은 모든 요소를 가지런하게 정렬하는 것입니다. 디자이너들이 ‘그리드’에 맞추라고 말할 때가 있는데, 그건 바로 정렬이 제대로 되어 있지 않다는 사실을 팀원들에게 알리려는 겁니다. 가지런하게 정렬하는 것만큼 효과적인 방법도 없습니다. 정렬만 잘해도 앱이나 웹사이트가 10배는 더 좋아 보이게 됩니다.

 

05. 텍스트는 적당한 간격을 둔다.

좋은 텍스트 사이즈 VS 나쁜 텍스트 사이즈 / 출처: Apple Developer

좋은 줄 간격 사이즈 VS 나쁜 줄 간격 사이즈 / 출처: Apple Developer

 폰트의 크기를 키우고 줄 간격을 적당하게 하는 것은 가장 기본이 되는 내용입니다. 너무 작은 글씨는 집중을 흩트릴 수 있고, 너무 큰 글씨는 정돈되지 못한 느낌을 줄 수 있습니다. 텍스트의 크기와 간격을 적절히 조절하여 콘텐츠를 읽기 쉽게 만들어보세요.

06. 검색 결과의 순서가 중요하다면, 리스트 뷰로 보여준다.

출처: UX Movement

 모바일 앱과 웹 애플리케이션에서는 어떤 형태로든 검색 기능들이 있습니다. 그런데 검색 결과를 어떻게 보여주는 것이 좋은지는 활발한 논쟁이 이어집니다. 순서가 중요하다면, 리스트 뷰(list view) 형태로 보여주는 것이 가장 효과적입니다. 리스트 뷰는 텍스트가 많고 이미지가 없는 것이 특징이며, 페이지를 짧게 만들어 오버 스크롤을 방지합니다.​

 

 순서가 별로 중요하지 않고, 유저가 여기저기 둘러보게 만들고 싶다면 핀터레스트나 에어비엔비처럼 그리드 뷰(grid view)로 만드는 것도 좋습니다. 그리드 뷰는 여기저기 둘러보면서 살펴보기에 좋은 사각 패턴이기 때문입니다. 그리드 형식은 텍스트는 최소한으로 하고, 유저가 이미지를 보고 선택하게끔 만듭니다.

 

07. 흑백 형태로 먼저 디자인하고, 나중에 색상을 더한다.

 

 흑백으로 디자인하면 앱의 핵심적인 기능에 집중해서 작업하고 디자인할 수 있습니다. 컬러를 입으면 그에 따른 느낌이 강해지기 때문에 중요한 부분에 집중하는 것을 방해할 수도 있습니다. 따라서 흑백 형태로 먼저 디자인하고, 나중에 색상을 더할 것을 추천합니다.

 

08. 편안하게 다룰 수 있도록 디자인한다.

출처: LukeW

 손으로 앱을 조작하게 하는 것은 정말로 중요한 부분입니다. 위의 예시를 통해 우리는 스마트폰에서 손가락으로 만지기 쉬운 부분이 어디인지 알 수 있습니다. 물론 오른손잡이를 예로 들지만 양손 모두 설정하게 해서 디자인을 적용한다면 더욱 좋겠지요. 잘 디자인된 모바일 앱을 보시면, 탐색을 비롯한 핵심 기능들 대부분이 아래쪽 3분의 1 부분에 모인 것을 보실 수 있을 겁니다.

09. 컬러 팔레트를 사용한다.

 색을 사용하는 것은 전문 디자이너에게도 굉장히 고민스러운 일입니다. 가장 추천드리고 싶은 방법은 드리블(Dribble), 쿨러스(Coolors)나 컬러 클레임(Color Claim)과 같은 컬러 팔레트 서비스를 이용하는 것입니다. 이런 서비스을 활용하면 디자인에 대한 영감을 줄 뿐만 아니라 색상에 대해 고민하는 시간도 줄여줄 수 있습니다.

 

10. 애플과 구글의 OS에서 제공하는 리소스를 활용한다.

 애플과 구글에서는 직접 자신들이 만든 리소스를 제공하기 때문에, 누구라도 iOS와 안드로이드 환경에서 실행되는 소프트웨어를 디자인할 수 있습니다. 예를 들어서 구글의 매터리얼(Materials)을 보시면 가이드라인, 리소스, 색상, 아이콘, 컴포넌트를 갖춰서 여러분도 처음부터 손쉽게 디자인할 수 있습니다. 또한 애플에는 휴먼 인터페이스 가이드라인(HG)이 있는데, iOS 앱을 디자인하는 데 있어서 알아야 할 내용을 알려줍니다.

​ 마치며

 좋은 디자인을 위해서는 부지런히 배우는 자세가 필요합니다. 특히 디자인과 관련된 안목을 키우기 위해서는 많은 시간과 훈련이 필요하지만 위시켓이 알려드린 팁을 잘 활용한다면 어떤 것이든 더 잘 디자인할 수 있을 것입니다. 만약 더 고도화된 디자인을 구현하기 위해 전문가의 손길이 필요하다면 위시켓을 사용해보세요. 7만 개의 디자인 업체와 디자인 프리랜서가 여러분이 만들고자 하는 디자인을 멋지게 구현해드릴 겁니다.

 

 

​출처 : 위시켓 블로그


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
1340 기 타 자 료 직장에서 어색함을 없애는 대화법 file 부산광역시사회공헌정보센터 2020.02.20 18
1339 사회공헌기사 LG전자 '기업의 사회적 책임(Coporate Social Responsibility, CSR)' 이야기 부산광역시사회공헌정보센터 2020.02.20 10
1338 기 타 자 료 중고 거래: 쇼핑은 끝끝내 배신하지 않는다(매일 돈 버는 여자) file 부산광역시사회공헌정보센터 2020.02.19 19
1337 부산공모자료 [한국타이어나눔재단] 2020 드림위드 우리마을 LEVEL UP 프로젝트 공모 file 부산광역시사회공헌정보센터 2020.02.19 41
1336 기 타 자 료 사람의 능력 보는 법: 주변인을 보자 file 부산광역시사회공헌정보센터 2020.02.18 15
1335 부산공모자료 [홀트아동복지회] 2020 의료문제아동 지원사업 ‘세상에서 제일 소중한 너라서’ 지원대상자 모집 file 부산광역시사회공헌정보센터 2020.02.18 35
1334 부산공모자료 [쿠쿠복지재단] 부산, 경남, 울산사회복지시설 정수기지원 사업 안내 file 부산광역시사회공헌정보센터 2020.02.18 69
1333 기 타 자 료 짐꾼부터 러시아 황제까지 사랑한 스타우트의 모든 것 file 부산광역시사회공헌정보센터 2020.02.17 14
1332 사회복지자료 월급받아 월세 내기 바쁘다? '사회주택' 시대가 온다 file 부산광역시사회공헌정보센터 2020.02.17 15
1331 부산공모자료 [부산사회복지공동모금회] 2020년도 복권기금사업 <반납차량 재배분> 공고 안내 부산광역시사회공헌정보센터 2020.02.17 47
» 기 타 자 료 디자이너가 아닌 당신에게 꼭 필요한 5분 디자인 가이드 file 부산광역시사회공헌정보센터 2020.02.14 13
1329 사회공헌기사 팔려는 자(者)·막으려는 자·나누려는 자...코로나19에 갈린 '놈놈놈' file 부산광역시사회공헌정보센터 2020.02.14 5
1328 부산공모자료 복잡한 인증 문턱 넘기자… 내기부금의 발자취 확인할 수 있었다(기자가 해봤다) file 부산광역시사회공헌정보센터 2020.02.14 4
1327 부산공모자료 [드림위드] 2020 드림위드 우리마을 LEVEL UP 프로젝트 file 부산광역시사회공헌정보센터 2020.02.14 30
1326 사회공헌기사 사회적 특이점(social singularity)이 온다(도현명의 임팩트비즈니스리뷰) file 부산광역시사회공헌정보센터 2020.02.13 9
1325 사회복지자료 “민·관 협력해 사회문제 해결하는 ‘사회복지 4.0 시대’ 열린다” file 부산광역시사회공헌정보센터 2020.02.13 14
1324 사회공헌기사 부산시, 예비사회적기업 지정과 일자리창출 사업 진행 부산광역시사회공헌정보센터 2020.02.12 15
1323 사회공헌기사 팬덤 기부 경험자 10명 중 6명 “다른 자선활동 함께 하고 있어요” 부산광역시사회공헌정보센터 2020.02.12 8
1322 사회공헌기사 “먹는 것, 입는 것, 노는 것 모든 ‘사회적가치’를 팝니다” 부산광역시사회공헌정보센터 2020.02.12 10
1321 부산공모자료 [국립장성숲체원] 2020년 2분기 「나눔의 숲 캠프」 참가단체 모집공고 부산광역시사회공헌정보센터 2020.02.12 26
Board Pagination ‹ Prev 1 2 3 4 5 6 7 8 9 10 ... 67 Next ›
/ 67

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5