blog

도아는 열심히 일하는 것 만큼이나 재미있게 놀며 문화를 즐기는 것에 최선을 다합니다.
도아에서 벌어지는 흥미로운 에피소드와 유익한 뉴스를 만나보세요.

[디자인정보] 디자이너가 준비해야 할 APP아이콘 사이즈의 모든 것

2016-07-05

다양한 모바일 디바이스에 다양한 해상도를 감안한 아이콘 디자인하기



디자이너가 스마트폰 앱 또는 소셜플랫폼 위에서 작동하는 앱을 만든다고 하면 각 해상도와 

플랫폼에 필요한 아이콘들을 준비해야합니다.

플랫폼이 많아 질 수록 디자이너분들의 작업량은 그만큼 많아지네요.


디자이너분들이 준비해야 할 아이콘 사이즈를 지금부터 정리해드릴게요.




 

iOS

단말기 해상도의 파편화가 안드로이드보다 덜 하지만,  디테일한 디자인을 요구하는

아이폰이라 준비해야 할 것들이 많습니다.

 


 

 

 

 

 


Android

안드로이드 단말기가 파편화되어 있다고하지만 오히려 iso보다 준비할 아이콘 종류는 적습니다.

해상도에 맞게 4종류만 준비하시면 됩니다.

 

 

 

 

 

 

 

 

 

Facebook

페이스북 연동하시는 분들이라면 페이스북 앱 설정에서도 아이콘을 등록하셔야 합니다.

16x16사이즈의 아이콘은 메뉴 또는 포스팅에 작게 표시될 아이콘이라 기존 아이콘의 축소형이 아닌 다른 심볼형태로 제작하는 것을 권장합니다.


 

 

 

 

 

그래프에 사용할 아이콘은 최소 200x200 사이즈를 권장하고 있습니다. 더 큰사이즈를 올리셔도 페이스북이 자동으로 스케일링 하지만,

트래픽을 절감하기 위해서 200x200 사이즈로 디자인 하는 것을 추천합니다.



지금까지 APP Icon Size에 대해 알아 보았습니다. 웹보다 Mobile환경이 더욱 부각되고 있는 요즘, 알아야 할 것도 많고

준비해야 할 것도 많지만,  새로운 환경이 두렵다고만 생각하기보다는 즐겨보는 것도 좋을 것 같네요.

 

 

 

 

 

[IT소식] 표정으로 말해요! 이모지(emoji)

옥스포드는 매 년 영어권에서 가장 주목할만한 트렌드나 변화상을 보여줄 수 있는 단어를 선정해서 ‘올해의 단어 Word Of The Year’라는 명칭으로 발표를 합니다. 2012년에는 그래픽 포맷(확장자)인 ‘GIF’, 2013년에는 셀프카메라를 뜻하는 ‘Selfie(셀피)’, 2014년에는 ‘vape(전자담배를 피우다)’라는 단어가 선정이 됐는데요. 2015년의 ‘올해의 단어’는 무엇이었을까요?  포스팅 작성 날짜와 다소 기간차이가 있지만, 너무나 흥미로운 ‘단어’가 선정되었기 때문에 뒤늦게나마 이야기해보고자 합니다^^   옥스포드 사전이 2015년 11월 16일, ‘올해의 단어 Word Of The Year’로 선정한 단어는 이모지(emoji)입니다. 사실 이 것은 알파벳으로 구성된 단어 그 자체가 아닌 그림문자죠. 그림문자가 올해의 단어로 선정된 것은 2015년이 처음이라고 하네요!       이모지의 탄생은? 그럼 이모지(emoji)에 대해서 알아볼까요? 이모지는 E(그림)+Moji(문자)의 합성어로, 일본의  '에모지(繪文字, 그림문자)'에서 유래되어 만들어진 단어라고 합니다. 이모지가 탄생한 곳은 바로 일본이라는 점! 1999년 일본 통신사 NTT 도코모의 개발자인 구리타 시게타가 선보인 250개의 그림문자가 바로 이모지의 시초랍니다. 일본에서 시작된 만큼 일본 전통 인형, 기모노, 화투 등 일본풍의 이모지가 다수 포함되어 있는 것을 찾아보실 수 있을 거예요. 요즘과 같이 디테일과 색깔이 더해진 이모지는 2011년 애플에서 처음 선보였습니다.        이모지와 이모티콘의 차이 그렇다면 ‘이모지(emoji)’랑 ‘이모티콘(emoticon)’이랑 같은 것 아닌가? 라는 의문을 가질 분들도 계실텐데, 같은 의미로 사용되고 있지만 조금 다른 의미를 품고 있답니다. ‘이모티콘(emoticon)’은 이모지가 등장하기 이전부터 우리가 익숙하게 사용해온 텍스트 기반의 문자 기호(ex. -_- / ^^ / :) / @.@ )를 뜻하고, ‘이모지(emoji)’는 유니코드 시스템을 기반으로 한 그림문자 이모티콘이라고 보시면 됩니다.       (옥스포드가 선정한 2015 올해의 단어 ‘기쁨의 눈물을 흘리는 얼굴 Face with tears of joy’)     기쁨의 눈물을 흘리는 얼굴 옥스포드는 수백개에 달하는 이모지 중에서 위의 웃으면서 우는, 약간 웃픈(?) 표정의이모지를 선정했습니다. 영미권에서는 흔히 ‘LOL’이모지로불린다고 합니다. 그 이유가 무엇일까요? 옥스포드가 모바일기술시업 스위프트키와 협력 분석한 결과, ‘기쁨의 눈물을 흘리는 얼굴’이모지가 지난 해 영국과 미국에서 1,000개가 넘는 이모지 목록 중에 사용빈도가 각각 20%, 17%에 달했다고 해요. 저는 ‘LOL’ 이모지보다는 눈에서 하트빔이 뿅뿅♥ 발사되는이모지를 더 자주 쓰는데, 개인적으로 의외의 결과라고 생각되네요. (영미권에는 웃픈 일이 많은가봐요)   이모티콘은 인터넷 세상이 도래한 뒤로 우리 곁에 늘 친근하게 있었는데, 이모지가 2015년의 올해의 단어로 선정되었다는 것은 이모티콘에 대한 관심이 그만큼 높아졌다는 뜻이겠죠? 실제로 옥스포드 측은 선정 이유로 “이모지가 비록 10대 위주로 사용되지만 그들 문화는 글로벌 주류 흐름이 됐다”면서 “이모지가 널리 확산됨에 따라 커뮤니케이션이 더욱 풍성해졌다”고 말하며 이모지 문화가 급속도로 퍼진 것을 선정 이유로 밝혔어요. 또한 이모지가 선정된 것은, 젊은 층만의 재미있는 의사 표현 방법이 아닌 다양한 국가의 다양한 언어권에서도 공통으로 사용할 수 있는 전 세계 공통 표현 수단이라는 이유일 것이라는 의견도 추가로 있답니다.       (2016년 추가 배포될 유니코드 9.0 이모지 시리즈. 개인적으로 베이컨과 부엉이가 맘에 드네요. 빨리 출시되었으면!)     이모지는 계속 진화 중 이모지는 실제로 전국 어디에서나, 누구나 쓰고 있는 글로벌 공용어 입니다. 구글, 애플, MS 등 글로벌 IT 기업이 2009년 유니코드 컨소시엄(Unicode Consortium)을 만들고, 722개의 공통 이모지를 공개했었습니다. 지금까지도 계속 추가·변경되고 있으며, 올해 2016년에 9.0 버전을 위한 이모지 캐릭터들이 인가되었어요. 새로운 이모지는 2016년 중반 배포될 예정이라고 하는데, 새로운 이모지가 너무너무 기대되네요.     이모지에 대한 우리나라의 반응 전 세계적으로 불고 있는 이모지 열풍, 우리나라에서는 어떨까요? 이모지를 많이 쓰고 계신가요? 우리나라에서는 카카오톡과 라인 등의 메신저 서비스에서 선보인 ‘스티커(sticker)’가 엄청난 인기를 얻고 그 시장도 굉장히 거대하게 성장했습니다. 이모지와는 조금 다른데, 아주 작게 표현되는 이모지에 비해 좀더 많은 면적을 차지하는 캐릭터 그림을 뜻한답니다. 이 스티커 때문에 그런지, 타국가보다는 이모지 이용빈도가 상대적으로 낮다고 하네요. 각종 스티커는 자체 캐릭터뿐만 아닌 웹툰 주인공, 연예인들의 모습까지 등장하고 있어서 사용자의 니즈를 충족시킴과 동시에 감정을 표현할 수 있는 아주 적절한 표현수단이 되고 있습니다. 또한 이러한 스티커 캐릭터들은 상품화도 되어서, 일상생활 속에서도 흔히 볼 수 있어요.     (LINE에서 서비스 중인 LINE스티커 캐릭터(상), 카카오에서 서비스 중인 카카오프렌즈(하))   카카오톡 관계자의 말에 따르면 이 귀여운 스티커 친구들을 도입할 당시, 판매를 목적으로 한 콘텐츠보다는 메신저 사용에 재미를 붙이기 위한 수단정도로 목표를 설정했다고 합니다. 하지만 예상보다 훨씬 뜨거운 반응에 정식으로 스티커 서비스를 시작했고, 유료화된 제품도 인기리에 팔리며 카카오톡 매출의 효자상품으로 자리매김했죠. 라이벌 메신저 앱 LINE도 캐릭터 스티커를 제작해서 후발주자이지만 주로 국내 성장을 도모했던 카카오톡과 달리 해외 시장에서도 꾸준히 이용자를 쌓아, 일본에서 엄청난 인기를 톡톡히 누리고 있다고 합니다. 제가 실제로 도쿄에 갔을 때, 잡화상점에서 LINE의 캐릭터 상품들을 심심치 않게 볼 수 있었어요.        글로벌 IT 기업이 이모지에 대응하는 방법 이야기가 잠시 샌 것 같군요..^^; (넘나 귀여운 라이언 때문에 조금 흥분했습니다) 그럼 다시 이모지 이야기로 돌아가 볼까요? 이모지가 중요한 의사소통 수단으로 자리 잡은 것을 반증하듯, 요즘 SNS 서비스나 실시간 채팅 교류에서 이모지를 포함하지 않은 대화를 찾기 힘들 정도입니다. 각종 글로벌 IT기업들도 이모지를 서비스에 적극 반영하기 위해 발 벗고 노력중입니다. 차례로 소개해 드릴게요. 최근 페이스북은 사용자의 얼굴로 이모지를 만드는 시스템의 특허를 취득했습니다. 얼굴 인식 기능을 가진 소프트웨어를 사용해 페이스북 사용자가 올린 사진을 이모지로 바꿔준다고 합니다. 또한 올해 초 사용자가 올린 글에 대한 답변용으로 ‘사랑해요’, ‘슬퍼요’ 등 5가지 이모지를 추가했어요. 그동안 페이스북은 ‘좋아요’가 유일한 버튼이어서 슬프거나 안타까운 소식을 공감하기에 부적절하다는 지적이 많았기에, 댓글 대신 표정을 달 수 있는 이모지 추가에 대한 반응은 매우 긍정적이라고 합니다. 또한 구글은 지난달 초 남녀평등 메시지를 담아 여성을 모델로 한 13종류의 새 이모지를 공개했습니다. 기술자, 화학자, 농부 등의 직업을 여성으로 묘사했는데, 그동안 발표된 이모지가 성에 대한 편견을 담고있다는 페미니즘적 지적에 대해 아주 발 빠르게 대응한 사례라고 볼 수 있겠네요. 또한 이는 이모지를 자주 사용하는 온라인 소비자의 78%가 여성이라는 점을 인식한 전략이기도 합니다.  재밌는 소식이 또 있습니다. 올해 초 MS는 스위프트키를 2억5000만달러에 인수해 최신 스마트 키보드 앱에 ‘스위프트모지’를 추가했습니다. 스위프트모지는 ‘예측 기술’로 사용자가 글을 쓸 때, 문맥과 흐름을 파악해서 적절한 이모지를 찾아서 제시하는 인공지능 입니다. 지금 구글 플레이 마켓에 베타 버전이 출시되있다고 하니, 안드로이드 사용자 분들은 체험해보시는 것도 좋은 경험일 것 같아요. (이모지에 대한 글로벌IT기업의 동향 분석 출처 : 신지선 국제경제분석가)       (다양한 이모지의 세계 : 순서대로 삼성(좌측 상단), LG(우측 상단), HTC(좌측 하단), google(우측 하단))   우린 모두 똑같지만, 또 달라요! 위의 귀여운 이모지 집단을 한 번 봐주세요. 어떠한 차이점을 느끼신 게 있나요? 자세히 보면 모두 같은 이모지라는 것 입니다. 사용하는 기종(OS나 디바이스)에 따라서 조금씩 느낌이 다른 이모지가 사용되고 있어서, 호환성에 문제가 발생하고 있는 경우도 생긴다고 하네요. 우측 하단 녹은 찹쌀떡 같은 구글의 이모지가 너무 귀여운 것 같아요. ^^   (각종 스마트폰 회사의 각각 다른 이모지들 : 같은 표정이어도 이렇게 달라요)   각종 IT 회사들이 다른 이모지 디자인을 채택하고 있는 부분에 대해, 미국 미네소타 대학교의 그룹렌즈 연구진이 발표한 흥미로운 연구가 있습니다. ‘이모티콘을 사용할 때 생길 수 있는 잠재적인 오해’라는 연구인데요, 같은 이모지을 두고 다른 스마트폰 기종을 쓰는 사용자들이 서로 다르게 해석할 수 있다는 내용을 담고 있습니다. 실제 연구내용을 살짝 들여다보겠습니다. 많은 참가자들이 삼성, LG, MS, 구글의 ‘이빨을 보이고 웃는 이모(위의 이미지)’를 긍정적으로 평가했지만, 애플의 이모지는 당황하거나, 민망하게 웃고 있는 것으로 해석했다고 하네요. 또 ‘하늘에 손을 벌리는 이모티콘’을 보고 ‘기도’나 ‘칭찬’으로 해석하는 참가자들이 있는 반면, ‘멈춰’라고 해석한 참가자도 있었다고 합니다. 연구 논문의 공동저자 한나 밀러(Hannah Miller)는 “이 연구는 내 경험에서 영감을 얻었다. 스마트폰이나 인터넷 브라우저를 쓰다가, 이모지가 매번 다르다는 사실을 발견했다”고 전했습니다. 참 재미있는 연구네요.       여기까지, 이모지(emoji)에 대해 이야기 드렸습니다. 재미있으셨나요? 저는 포스팅을 쓰면서 새롭게 알게 된 정보가 정말 재미 있었습니다! 2015년 하반기에 선정된 단어라 조금 늦게 소개해드리는 느낌이 없지 않지만, 이모지도 UI의 한 부분이라고 생각되어서 그냥 지나칠 수 없었답니다^^   그럼, 곧 다가올 2016년 올해의 단어(Word Of The Year)를 기대하며 포스팅을 마무리 하겠습니다. 읽어주셔서 감사합니다!

2016-07-07

[디자인 영감] 신모래 일러스트레이터

안녕하세요?J도아 디자인팀 주임 유세리입니다!   오늘은 여러분께 제가 요즘 눈여겨보고 있는 작가님을 소개해 드리려고 해요ㅎㅎ     `신모래 일러스트레이터`     지극히 평범한 일상들을 감각적인 색감과 드로잉으로 표현하여 사람들의 마음을 사로잡고 있답니다!    작가님 작품을 한번 볼까요?         이미지 출처 – 신모래 작가님 인스타그램 (@shinmorae_)        작가님 작품 대부분은 이렇게 화사한 컬러와 방 안에 있는 컨셉이 많답니다!       이미지 출처 – 신모래 작가님 인스타그램 (@shinmorae_)     작품 속에 인물들은 다 특이하게도 눈을 괄호로 표현이 됐는데요.   그 이유가 그림에 눈이 등장하면 굉장히 직관적인 작품이 되는 것 같아서 자연스레 눈 위치에 괄호를 넣게 되었다고 해요.   이렇게 하나하나 알아가는 재미가 쏠쏠하네요!     이미지 출처 – 신모래 작가님 인스타그램 (@shinmorae_)      화사한 컬러와 예쁘게 빛나는 네온사인. 그 속에 상반되는 주인공의 모습...   작품을 보고 있으면 왠지 쓸쓸하게 보이지 않나요? 작품 곳곳에서 이런 감정들을 확인할 수 있는데 이번 작품에서는 시각적인 이미지와는 상반되는 쓸쓸하고 공허한 정서를 표현하고 싶으셨다고 해요~ 그림에서 느껴지는 감성이 확 와 닿는 것 보면 작가님이 의도하신 대로 작품에 정서가 잘 녹아낸 것 같아요J        다음 작품에선 어떤 색감과 어떤 정서를 담고 있는 그림들이 나올까 너무 기대된답니다 :D 저는 주로 인스타그램을 통해 작가님 작품을 보고 있는데요! 인스타그램에서 작가님을 접한 후, 팬이 되어버린 저는 참지 못하고 아트북을 지르고 말았답니다. . .   이름하여 `shin Morae`       정말 소장할만한 가치가 있는 아트북이에요..   인스타그램에서 좋아요만 눌렀던 작품들이 아트북을 통해 내 손으로 들어오다니 완전 감격 ㅠ_ㅠ…     아트북과 함께 엽서랑 스티커들도 같이 들어있어서 뜻밖에 선물을 받은 느낌이었어요J 엽서랑 스티커도 너무 이뻐서 쓰지 못할 것 같아요 ……… ㅋㅋㅋㅋㅋㅋㅋㅋ모두 다 소장하는 걸로!! 요즘 핫한 감각적인 일러스트레이터 신모래 작가님 작품을 여러분도 한번 구경해 보세요!     신모래 작가님 인스타그램   @shinmorae_      

2016-07-07

[디자인정보] 모바일 웹 디자인을 위한 디바이스 별 스크린 사이즈

모바일 시장이 보다 강력해짐에 따라 스마트폰에서부터 태블릿까지 세상에 무수한 모바일 기기가 등장했습니다. 여러가지 크기의 모바일 기기가 등장하면서, 당연히 스크린 사이즈 또한 굉장히 여러가지로 세분화 되었는데요. 4인치 세대의 다음 세대로 등장한 4.7인치 화면이 세상에서 가장 유명한 형태를 취하며 가장 보편적인 모바일 스크린 사이즈로 자리 매김을 했지만, 여전히 다양한 디바이스에서 동일한 화면을 보여주기 위한 스크린 사이즈 정리가 필요합니다. 오늘도 모바일 사이즈에 대해 고민하며 작업을 하고 계실 많은 분들을 위해, 스크린 사이즈 정보를 자세히 알려드리고자 합니다!   스마트폰 스크린 사이즈   태블릿 스크린 사이즈 한 눈에 봐도 정말 다양한 디바이스 환경이 있다는 걸 알 수 있죠? 각각의 단말마다 일일히 분기를 시키려면 공수가 너무 많이 들어가게 되죠. 적절한 사이즈를 기준으로 레이아웃을 동일하게 잡은 뒤, px 단위 또는 %로 잡아주어야 모든 디바이스 환경에서 무리없이 적용할 수 있답니다.   유용한 사이트 정보 추가로 소개해드리는 다음 사이트에서는 현존하는 스마트폰, 태블릿 뿐만 아닌 노트북 화면의 스크린 사이즈 정보까지 상세하게 제공합니다. 화면 우측 상단의 필터기능으로 원하는 디바이스의 정보만 추려서 볼 수도 있습니다.  URL : http://screensiz.es/     그리고 다음 소개해드리는 사이트는 기기별 모바일 화면에 대한 웹 테스트를 직접 해볼 수 있는 ‘다음 트로이’라는 사이트인데요. 화면 좌측의 분류를 통해 디바이스별 해상도 확인은 물론, 실제 web url을 입력해서 어떻게 작동하는지 바로 확인이 가능합니다. 또한 화면 회전 기능과 반응형 테스트, 멀티스크린 모드로 여러 개의 디바이스를 동시에 비교할 수도 있답니다! 직접 핸드폰에 url을 두드려서 확인할 필요가 없으니 훨씬 간편하죠? URL : http://troy.labs.daum.net/     여기까지, 다양한 디바이스 별 스크린 사이즈에 대한 정보를 알려드렸습니다. 현재까지는 4.7인치 화면과 풀HD 해상도가 스마트폰 시장의 선두주자로 달리고 있지만, 앞으로도 모바일 시장은 더욱 거대해질 것이고 그에 따라 현존하는 것들 외에도 더욱 다양한 스크린 사이즈와 스마트폰 모델이 등장할 것입니다. 그에 맞게 우리도 공부와 연구를 게을리 하지 않아야겠습니다! ^^

2016-07-07