[앱 디자인] 벤치마킹에 유용한 사이트

작성자: -
*이 문서는 지속적으로 업데이트 될 예정입니다.

앱 디자인을 처음으로 시작하면서 많은 자료를 웹에서 찾았는데요, 이미 많이들 아시겠지만 유용한 사이트를 공유하려고 합니다.


Behance 
[UI, BI, App, Web]


디자이너들 사이에 가장 유명한 포트폴리오 사이트이지요? ㅎㅎ
지인의 지인이 심플한 아이콘 디자인을 이곳에 올렸다가 애플 본사에서 연락이 와서 채용되었다는 깜짝 놀랄 소식도 들은 적 있습니다. ㅎㅎ 그만큼 디자이너들이 자신의 포트폴리오를 어필할 수 있는 공간이고 퀄리티 높은 작업물들이 아주 많구요. Adobe ID로 로그인해서 마음에 드는 포트폴리오를 저장할 수 있습니다.



Dribble 
[인터랙션, 모션, 컬러]



목록에서 보고 싶은 디자인 작업물을 선택한 뒤, 오른쪽에서 원하는 컬러를 선택하면 해당 컬러톤의 디자인 작업물을 찾아줍니다. 원하는 컬러 톤 벤치를 할 때 유용하구요.


[1] 원하는 컬러 선택

[2] 선택한 컬러 톤의 디자인 보여줌


또 한가지 강점은 상단 메뉴에 Shots > AnimatedGIFs 를 누르면 인터랙션 GIF 들이 나오는데 꽤 퀄리티가 높습니다. 인터랙션을 벤치마킹할 때 유용합니다.

각종 인터랙션 GIF

그밖에 Dribble 만큼 컬러 톤 벤치하기에 유용한 사이트는

https://brandcolors.net/

온갖 브랜드의 메인 컬러를 한눈에 보고, 간단한 클릭만으로 색상값을 저장할 수 있습니다.

또 하나는 Adobe Kuler가 있습니다.

https://color.adobe.com/ko/create/color-wheel/

원하는 색상 조합을 만들어서 공유할 수도 있고, 타인이 올린 색상조합을 저장해서 Photoshop 에서 Color Themes 를 꺼내 사용할 수도 있는 유용한 사이트입니다.

 https://coolors.co/

이 곳도 비슷한 톤의 컬러를 매치하는데 유용한 사이트입니다^^




Pinterest [UI, UX, Web,APP]


https://www.pinterest.co.kr/


핀터레스트에서 app ui design 등으로 검색하면 정말 많은 자료를 찾아볼 수 있습니다. 웬만한 포트폴리오 모음 사이트보다 좋더라구요

안드로이드 머티리얼 디자인 가이드라인 문서
[Mobile App UI, UX]




앱에서 기본적으로 스타일, 색상 정의를 어떻게 하는 게 좋은지, 어떤 방식의 디자인을 권장하는지 매우 잘 정리된 문서입니다. 앱 디자인을 처음 시작할 때 참고로 보시면 좋을 것 같습니다.

* UX 관점에서 확인, 취소 버튼 위치 같은 것은 안드로이드/아이폰 가이드가 다르기 때문에 만드는 앱의 OS에 따라서 다르게 적용하면 좋을 것 같습니다. 만일 한 가지 디자인으로 두 OS 버전 모두에 배포한다면 둘 중 하나의 가이드라인을 앱 내에서 일관되게 따르는 것이 좋습니다.

댓글

댓글 쓰기

주간 인기글

카드뉴스 마케팅 팁

작성자: -
이미지
아이프렌즈펫의 카드뉴스 최근 SNS에서 가장 핫한 콘텐츠 유형 카드뉴스! 아이프렌즈펫은 현재 홍보 예산을 쓰지 않는 방법으로 인스타그램, 페이스북으로 카드뉴스 콘텐츠 마케팅을 하고 있습니다. 일주일에 1개씩 올리다보니 어느덧 6개월 정도의 시간이 흘렀습니다. 짧은 기간이지만 운영한 경험을 공유하고자 합니다. ㅎㅎ 아이프렌즈펫 페이스북 페이지 >  https://www.facebook.com/ifriendspetpage/ 아이프렌즈펫 인스타그램 >  http://picbear.com/ifriendspet 카드뉴스란? 카드뉴스는 짧은 글과 이미지로 구성된 여러 장의 카드입니다. 단순한 홍보에서부터 언론사까지 다양한 곳에서 활용되고 있는 컨텐츠입니다. 카드뉴스 마케팅의 장점 * 모바일 환경에서 가장 최적화된 콘텐츠 유형이며, * 제작 방법도 다른 홍보 수단에 비해 비교적 간단하고 * 홍보 효과가 빠릅니다. (블로그 - 약 6개월, 카드뉴스 - 3개월) 재미있는 카드뉴스 마케팅 예 옥션 #어서옥션 인스타그램 >  https://www.instagram.com/ebayauction/ 제가 인스타그램에서 가장 재미있게 구경하는 피드 중 하나입니다. 홍보 느낌이 하나도 안나요~ 오레오 #오레오 페이스북 >  http://bit.ly/2gA4MDw 오레오는 제가 마케팅의 ㅁ자도 모를때부터 구경하고 있던 페이스북인데요 과자 하나가지고 이렇게 창의적인 작품들을 꾸준히 업데이트 할 수 있다니 놀랍더라구요 ㅎㅎ 카드뉴스 만들기 1. 주제 선정 카드뉴스를 통해 얻을 목표와 타겟이 명확해야 합니다. 그에 맞춰 전달하려는 정보나 메시지 등을 리서치해서 기획을 하고 제작합니다. 처음 해보시는 분들에게 실패를 줄이기 위한 팁을 드리자면 (여기서 실패란 그냥..묻히는 것 말입니다 ㅠ) 1. 비슷한 주제의 페이스북 페이지 운영하는 곳을 되도
자세한 내용 보기

[ubuntu] 신규 계정에 sudo 권한 추가하기

작성자: -
이미지
NCP 에서 신규 서버를 생성하면  AWS 와는 다르게 root 계정과 패스워드를 발급해 줍니다. 해당 계정정보를 잘 보관한 후 실제 사용할 계정을 생성해서 서버를 관리하게 됩니다. 1. 우선 ubunbu 에서 신규 계정을 생성  합니다. # adduser namsan cs namsan 이라는 계정을 생성하고 패스워드를 설정하였습니다. 2. 신규 생성된 계정으로 전환 후 명령어를 실행해 봅니다. su 명령어를 통해 신규 생성 계정으로 전환 합니다. # su namsan cs sudo 명령어를 실행해 보겠습니다. # sudo date cs “namsan is not in the sudoers file.  This incident will be reported.” cs sudoers file 에 해당계정이 포함 되어있지 않다는 메시지가 출력됩니다. /etc/sudoers 에 신규 계정이 추가 되어 있지 않아 표출되는 에러 메시지 입니다. 다시 root 계정으로 전환하여 sudoers 파일을 수정해보겠습니다. su 명령어를 통해 다시 root 계정으로 전환 합니다. # su root cs 3. vi 명령어를 통해  /etc/sudoers 파일을 편집합니다. # vi /etc/sudoers cs # User privilege specification 항목에 아래와 같이 신규 생성된 계정 정보를 추가합니다. root  ALL=(ALL:ALL) ALL namsan  ALL=(ALL:ALL) ALL cs 이제 신규 생성된 사용자로 전환하여 sudo 명령어 실행 시 정상적으로 작동하는 것을 확인 할 수 있습니다.
자세한 내용 보기

스타트업 성장 곡선 The Startup Curve

작성자: -
이미지
* 다음 글은 '그로스 해킹'(조민희 저/디지털북스) 책에 있는 글을 참고해서 작성되었습니다. Paul Graham 이 그린 스타트업 성장 곡선이 책에 있는데 영어로 되어 있어서 사전을 참고해서 (ㅋㅋ) Startup Curve 를 다시 그려 보았습니다.  (원래 그림:  http://www.businessinsider.com/chart-of-the-day-the-startup-curve-2012-3 ) 대부분의 실리콘밸리 스타트업들이 겪는 Process 라고 합니다 1번 단계 ( 제품 출시 초기) 얼리어답터들이 유입되어서 일시적으로 성장곡선이 상승하는 때입니다 얼리어답터들은 우리의 타겟층이 아니더라도 단지 그것이 새롭기 때문에 써보는 사람들이기 때문에, 호기심에서 써보다가 신섬함이 사라지면 금방 그 제품을 쓰지 않기도 합니다. 얼리어답터들은 보통 전체 구매자들 가운데 2.5% 밖에 되지 않는다고 해요. 그래서 1번 단계는 마치 가파르게 성장한 것 같지만 금방 거품이 꺼진 것처럼 보이죠 2번 단계 출시한 제품을 써본 얼리어답터들이 빠져나간 자리에는 적막이 감도는데요 실리콘밸리에서는 이 기간을 슬픔의 골짜기 (Trough of Sorrow) 라고 부른다고 합니다.  성장곡선이 침체에 빠지는 이 단계가 되면 모든 작업자들이 이런 생각을 한다고 해요 기획자 - 새로운 아이디어를 내놓아야 해 디자이너 - UI 가 뭔가 이상한 게 분명해요. 다 수정해야겠어요 개발자 - 문제가 있는 거 같아서 코드를 전면적으로 리팩토링 해야겠어요 마케터 - 유명한 인플루언서를 확보해서 그들을 통해 홍보를 좀 더 적극적으로 해야해요 . . 그런가 하면 초기 제품 사용자들의 의견도 하나 둘씩 나오기 시작하죠 사용자 A - 이 부분 좀 이렇게 고쳐주세요 사용자 B - 이런 기능이 좀 있었으면 좋겠는데 . . 그래서 새로운
자세한 내용 보기

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

작성자: -
이미지
[그림출처]  https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다. 문자 그대로. SNS는 사용자들이 자발적으로 공유하는 글, 사진 등의 정보를 모아서 그 데이터를 기반으로 어떤 사용자가 무엇에 관심이 있는지 파악하여 사용자들에게 가장 관심 있을 만한 광고를 보여주곤 합니다. 몇 년 전부터 페이스북은 앱의 마이크 접근 권한 을 사용하여 핸드폰 주위의 모든 대화 등의 소리를 수집.파악하여 폰 사용자가 무엇에 관심 있는지 데이터를 얻고, 타겟 맞춤 광고에 이 정보를 활용한다고 하는 의혹을 받아왔습니다. 페이스북에 인수된 인스타그램도 마찬가지로요. 저도 가끔 의아했습니다. 어떻게 내가 검색창에서 검색한 적도 없고, 사진도 찍은 적 없고, 글로 쓴 적도 없는 어떤 것에 대해서 인스타그램이 나에게, 그것에 관해 얘기한 지 10분 만에 정확히 그와 관련된 상품을 광고로 보여줄 수가 있지? 그런데 동일한 의문을 품은 유저들이 여러 명 있었던 것 같습니다. (관련글  https://www.imore.com/how-stop-facebook-accessing-your-microphone https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023  ) 물론  페이스북이나 인스타그램은 공식적으로 '절대로 그렇지 않다' 고 발표하지만, 그렇다고 하더라도 혹시 있을 수 있는 사생활 침해에서 앱의 마이크 접근 권한을 차단하는 것은 나쁘지 않은 것 같습니다. 만약을 위해 사생활을 보호하려면, 페이스북이나 인스타그램 앱 설정 부분에서 페이스북 앱, 인스타그램 앱의 마이크 접근 권한을 비활성화 하시면 됩니다. 1. 아이폰 또는 설정에서 아래로 스크롤해서, 인스타그램 앱을 선택한 다음, 해당 앱의 마이크 권한 비활성화를 해도 됩니
자세한 내용 보기

현수막/명함 등 인쇄물 디자인하기

작성자: -
이미지
문화체육행사_포스터 이번 포스팅으로는 행사라던지 일정표 등 여러가지 인쇄물 제작을 할 때의 디자인 방법에 대해 간단하게 소개하려고 합니다 ㅎㅎ 인쇄물 포토샵 세팅  해상도 (Resolution) 300 dpi  로 잡아줍니다. 안그러면 해상도가 낮아서 깨져 보여요. (보통 웹 작업을 할 경우 72dpi 로 잡혀 있음) 색상 (Color Mode) 인쇄물이므로 RGB 컬러가 아닌 CMYK 아시겠지만 RGB와 CMYK 색상은 차이가 많이 나니까 미리 잘 세팅하셔서 나중에 작업 다 끝내놓고 인쇄 직전에 멘붕에 빠지지 않으시기를..^^ <-경험자 일러스트레이터로 작업하실 경우는 컬러모드나 해상도 등은 문제가 되지 않으므로 인쇄물은 되도록 일러로 작업하시는 게 좋을 것 같습니다. 1. 현수막 만들기  체육행사_현수막 사이즈 보통 만들고자 하는 크기가 m 단위인데요 만들려고 하는 크기의 10분의 1정도 사이즈로 작업을 합니다. 예를들어 6m x 1m 사이즈의 현수막을 만든다고 하면 포토샵/일러로는 60cm x 10cm 로 제작을 합니다. 실물 크기로 만들 경우 컴퓨터의 성능이 엄청나지 않은 이상 작업에 무리가 있고, 10분의 1 사이즈로 제작해서 인쇄해도 괜찮아요~ 현수막은 처음부터 사이즈를 확정하고 작업하셔야 수정할 일이 덜 생깁니다.^^ 보통은 강당이나 어느 특정 장소에 걸어야 하기 때문에 사이즈가 제한적일거고, 그걸 미리 잘 알아두시고 작업하셔야 기껏 작업한 디자인을 버리는 일이 생기지 않아요^^ 2. 명찰 만들기 사이즈 실제 사이즈대로 만들되 명찰 사이즈보다 조금 더 작게 만들어 인쇄해야 나중에 명찰에 끼워넣을 때 고생하지 않아요^^ 3. 명함 이번에 아이프렌즈펫에서 명함 사이즈의 홍보카드를 만들었는데요, 작은 사이즈이지만 의외로 까다로워서 처음 제작단계부터 인쇄업체와 대화를 많이 하시는게 좋은 것 같구요  (아래의 경우 같이 일한 인쇄업체의 요
자세한 내용 보기