제목: Product Design Exercises We Use At WeWork Interviews
저자인 Artiom Dashinsky@hvost와 dashinsky.com에서 만날 수 있습니다.

제품을 생각하는 스킬을 연습하고기위해 이 예제들을 사용해보고, 디자인 지원자들을 어떻게 시험하는지 배우자.

디자인 커뮤니티는 운좋게도 DribbbleBehanceDaily UI등과같은 많은 훌륭한 리소스들이 있다. 이 리소스들은 다른 비주얼 작업을 볼 수 있게 해주고, 여러분의 것들을 보여주고 피드백을 받을 수 있다. 이에반해 체계적인 비주얼-중심의 디자인 커뮤니티 시장은 디자인의 Dribbble화(어떻게 생겼고 어떻게 동작할지에 사로잡힌)를 만들어낸다. 이 프로세스 입문의 디자이너들의 생각에 잘못된 이해를 만들어줬다. 바로 "제품 디자인 = Dribbble" 이다.

입문 디자이너들은 제품을 생각하는 스킬로 작업해야한다.

Julie Zhuo가 이야기하는 커리어 단계와 그녀의 놀라운 The Beginning of your Design Career글Julie Zhuo가 이야기하는 커리어 단계와 그녀의 놀라운 The Beginning of your Design Career글


오늘날 최고의 비지니스는 디자이너들이 미학보다는 회사가 옳은 사람들을 위한 옳은 기능을 만드는 것을 보장하는 역할을 해야한다고 이해하고있다. 불행히도 이런 비지니스들은 주니어 디자이너들을 고용해서 어떤 과제를 해결할지 적절하게 소통하고 있지 않았다.

제품 생각을 연습할 수 있는 리소스가 부족하기도하고, 이것은 개선하기위해 작업하는 디자이너 스킬과 최고 회사들이 그들에게 기대하는 스킬 사이에서 갭을 만들었다.

만화 저작권: Andrew Hwang만화 저작권: Andrew Hwang



디자인 커뮤니티가 어떻게 도와줄 수 있을까
디자인 커뮤니티가 이 갭을 최소화시키는데 좋은 일을 할 수 있으므로, 그 결과 우리는 시장에서 디자이너를 더 잘 준비할 수 있고 산업 앞으로 갈 수 있다. 여기에 우리가 도울 수 있는 몇가지가 있다.

디자이너:
  • 제품 생각을 연습하기위한 리소스를 만들기
  • 인터뷰에서 해볼 수 있는 디자인 테스크 숙제를 공유하기. 그러나 여러분이 공유하는 것이 회사 작업과 관련된 민감한 정보를 드러내지 않도록 조심해라.

회사:
  • 도전과제 종류의 명확성을 높히기위해 케이스 연구 만들기
  • 당신의 고용 프로세스에 더 투명성을 넣어, 신입 디자이너들이 고용되고서 어떤 종류의 문제를 제품 디자이너들이 풀것을 기대하는지 배울 수 있게 할 수 있다.

첫걸음 떼기


WeWork Digital 디자인 팀의 창의적인 리드: Stephanie Wu and Andrew Couldwell. 사진: Nina Robinson for Inside Design: WeWorkWeWork Digital 디자인 팀의 창의적인 리드: Stephanie Wu and Andrew Couldwell. 사진: Nina Robinson for Inside Design: WeWork


기술 회사들은 제품 디자이너 직군에서 조금 다른 접근법의 인터뷰를 가진다. 그러나 이들 모두 지원지의 제품 생각을 확인하는 목적이다. 페이스북은 제품에대해 디자인 논평을 물어보고, 구글은 제품 생각과 관련된 화이트보드 과제를 한다 인터렉션 디자인에 아주 초점을 두면서 말이다.

WeWork에서는 제품 디자이너 인터뷰 프로세스 중 일부분은 화이트보드 과제도 포함된다. 우리는 커뮤니티에 그 몇가지를 공유하기로 결정했다.

이 과제를 어떻게 사용할까

우리는 왜 화이트보드 과제를 하는가?



제품 생각을 테스트하면서, 화이트보드 과제는 지원자를 아래와같은 능력에대해 테스트하기 좋은 도구이다.
  • 팀과 효율적으로 의사소통하기
  • 비판적으로 생각하고 좋은 질문 하기
  • 피드백/건설적 비판 다루기
  • 데드라인이 다가올때 새로운 문제에대해 높은 압박의 환경에서의 능력
  • 팀이 매일매일 이 사람과 협력하고 싶은 종류의 사람인지

결과물에는 이것을 포함할 수 있다



모든 과제들은 우리 사무실 현장에서 시행되는 것이다. 지원자들은 60분이 주어지며, 곧 15-20분 발표와 토론을 한다.


과제 목록

아래에는 당신이 해볼 수 있는 17가지 과제가 있다.

1. 룸메이트
: 전세계 인구의 54%는 도시에 살며, 남자의 평균 결혼 나이는 29살이고(20년전 26세 이상) 여자는 27살이다(같은 기간의 23세 이상). 이런 트렌드에서, 도시 거주자들은 20대의 대부분을 룸메이트와함께 사는 경향이 있다. 그러나 더 많은 사람들이 도시로 들어오기 때문에 좋은 룸메이트를 찾고 유지하는 것은 더 힘들다.

모바일 제품 경험을 디자인하는데, 서울에서 이상적인 룸메이트를 안전하게 찾을 수 있게 해주어 밀레니얼 세대를 찾을 수 있어야한다. 룸메이트를 찾고 있을 뿐만 아니라 아파트도 찾고 있는 사람의 관점에서 경험을 디자인하라. 이상적인 룸메이트가 발견되고나면 이 제품이 더 나은 룸메이트 경험을 만들기위해 어떤 다른것을 할 수 있을까?

"좋은 룸메이트를 찾기/유지하기"같은 행로에서 고통스러운 지점을 확인해보고 이 고통스런 점을 해결하는 방법을 찾는 당신을 지켜보고있다.

제약사항: iOS와 안드로이드의 현재 모바일 기능을 붙여야한다.

2. GoPro는 새로운 앱이 필요하다
GoPro의 미칠듯한 성곡적 액션카메라는 세계적인 발자취를 가졌다. 아제 카메라의 비용은 5만원 이하고 수많은 사람들은 그들의 삶에 모험을 기록하는데 사용하고 있다.

그러나 GoPro는 문제를 가지고 있는데, 현재 모바일 앱이 3가지에만 좋다는 것이다. 그들의 카메라로 찍은 사진을 보는데, 이 사진을 편집하는데, 세계의 다른 사람들이 찍은 사진을 보는데. 세계를 바꾸고있는 카메라를위해, 이 앱은 인정하는바와같이 무디며 표면을 밀어내지 못한다.

GoPro 회사는 당신에게 새롱누 모바일 앱을 만들 임무를 주었고, 하나는 사진 환경에서 뛰어나고(인스타그램, Vsco cam, snapchat), 하나는 밀레니얼 세대를 어필할 것이다. 이렇게 새롭고 개척적인 것에서 완벽한 GoPro 앱은 어떤 일을 해야할까?

제약사항: 이것은 iOS 앱이며, 제안된 모든 기술은 오늘이나 12달안에 시장에서 사용할 수 있어야한다.

3. 구글 엔터프라이즈 판매 깔때기(Google Enterprise Sales Funnel)
(역자: 번역하다가.. 힘들어서 원문 넣었어요.)
You are consulting Google on an important strategic decision for their enterprise offerings; they want to know whether it’s worth introducing a sales funnel management tool onto their Enterprise Gmail interface. Google believes that because a majority of their enterprise users discuss business on their email platform and because they are the lexicon of most people’s business contacts, that they are in a position to both make the sales process more efficient and make the likelihood of closing business higher.

26% of Google’s Enterprise users engage in sales weekly, 40% engage in some sort of funnel management (whether sales, hiring, or some other decision funnel).

A typical sales funnel includes Leads, Inquiries, Prospects, Quotes and finally a new customer.

Recommend a funnel management flow to Google. Make sure the flow accounts for a user making initial contact with a lead from within gmail and then managing that lead through the entire funnel. What else can gmail do to put the odds of closing business in favor of their user?

제약사항: 없음

4. 비지니스 승객
자동차가 스스로 운전하는 세상에서 살고있다고 가정하자. 집집마다의 경험을 디자인하자. 이것은 4명의 비지니스 직원이 주일에 뉴욕에서 볼티모어까지 최대 4시간 여행할 수 있게 만들 수 있다.

제약사항: 우리가 허용하는 기술 도약은 모든 자동차자 스스로 운전할 수 있는것 뿐이다. 제안된 다른 기술들은 반드시 오늘날 존재하거나 6-12개월엔에 현실적으로 존재해야한다.

가정: 비지니스 직원과 "새로운 클라이언트"의 어떤 종류도 고를 수 있다. 비지니스 직원의 나이는 28살부터 45살이다.

5. Spotify Artist Actalogue Manager
스포티파이(Spotify)는 아티스트에게 그들의 플렛폼에서 그들의 카탈로그 컨트롤을 제공하도록 결정해왔다. 제일 처음 아티스트들은 자신의 엘범을 관리하고, 자신의 아트워크를 올리고, 특정 제품을 판매하며, 그들의 음악에 가사를 넣는등, 그들이 필요한 조건에 달렸다.

맥-기반 에디터와 아티스트 관리 시스템을 만들어서 아티스트들이 Spoty에서 그들의 presence를 관리할 수 있도록 한다. 솔루션은 Spoty에 현존하는 모든 아티스트 컨텐트를 대상으로 하지만, 자유롭게 창의적으로 넣고 아티스트가 유용해할 수 있는 추가 기능을 넣을 수 있다.

제약사항: 당신은 맥 데스크톱 앱을 디자인하고있다. OS의 기능에 들어가있어야 할 것이지만, 그들이 여기에 적용하지 않으므로 어떤 웹과 관련된 기술 제약은 무시해도된다.

6. E-ink
지금 e-ink의 가격은 0원이다. 어떤 인터페이스가 집에서 매일매일 삶을 더 흥미롭게 만드는데 혁신적일 수 있을까? 포괄적으로 그리고 잘 생각해낸 리스트를 찾아보자. 비주얼없이 설명하기 힘든 몇가지 인터페이스 예시를 만들어야한다고 생각되면 먼저 리스트를 만들어라.

제약사항: 없음

7. Crisis News Network
"Crisis News Network" 혹은 CNN은 속보와 세계적인 다른 뉴스들의 가장 큰 기업합동(syndicate)이다. 그들은 millennial 청중에 포커스를 맞추고있다. 그들은 자신의 사이트(데스크톱)에서 뉴스 경험을 다시 생각하기위해 당신을 고용하였다.

오늘 세대의 뉴스 소비자를 위해 주목할만한 뉴스 사이트를 디자인하라. millennial들이 컨텐트를 소비하고 공유하는 방법을 직접 찾아보자. CNN은 "그들이 어떤것을 항상 해내는 것"에대해 독단적이고 싶어하지 않는다. 그들은 장벽을 깨고싶고, 그들은 몇가지 위험을 안고서도 새로운 곳으로 가고싶어하고, 당신이 업계에 변화를 만들기를 기대하고 있다.

홈페이지와 스토리페이지를 디자인하라.

제약사항: 현존하는 웹 기능을 사용하라.

8. 오디오북을 개인화하기
오디오북과 팟케스팅은 모바일에서 오디오 부분을 가장 빠르게 성장했다. 오디오북을 듣는 사용자들은 페이지 한쪽 모서리를 접거나, 원하는 곳에 밑줄 긋거나, 좋아하는 페이지를 메모하는 일을 즐기지 않는다... 그들은 책을 소유하고 오랫동안 보아서 향수를 불러 일으키는 면을 잃는다. 오디오 경험으로 모바일에서 너무 많이 있게된다.

매우 개인적이고, 인터렉티브한 오디오북 혹은 팟케스트 모바일 앱을 디자인하라. 그리고 책이 할 수 있는 것보다 더 유용한 기능을 가져다 주어야한다.

제약사항: 제안된 모든 기능은 현존해야하거나, 다음 6개월안에 실현가능해야 한다.

9. 오디오북에서 특정 오디오 섹션과 인터렉트하기
주머니에는 iPhone을 가지고있고, 손목에는 Apple Watch, 헤드폰을 끼고있으며, 삶을 바꾸는 오디오북이 그 안에서 실행하고있다. 사용자가 아래중 하나 혹은 그 이상이 되는 인터렉션 플로우를 디자인하라.
- "하이라이트" 오디오, 책에서 텍스트에 하이라이트하는 것과 비슷하다. 사용자가 컨텐트에 하이라이트하면 이제 어떤 일을 할 수 있을까?
- 세계에있는 다른 청취자의 book을 듣기. 다른 청취자의 컨텐트에 당신의 이모션을 공유하자.
- 당신이 찾은 흥미로운 오디오북 일부분에 메모를 하기.

제약사항: 당신이 가진 기기의 기술적 한계내에서 작업하라.

10. 여행하는 영업사원을 위한 캘린더
발렌티나(사람이름)는 행운의 500개 회사를위해 영업과 비지니스 개발을 선도한다. 그녀는 한달 4주중에 3주를 여행하며, 여행은 거의 대부분 국외로간다. 다른 타임존 여행과 다른 도시에서 바쁜 회의 스케줄 사이에서, 그녀는 올바른 시간에 올바른 장소를 보여주는 과제를 찾아냈다. 회의시간을 제안하고, 타임존 변경을 책임지고, 그녀가 항상 회의에 제시간에 가도록 선처할만큼 스마트한 캘린더 플로우와 인터페이스를 디자인하라.

제약사항: 솔루션은 모바일친화적으로 만들고 오늘날의 실용적인 기술을 사용해야한다.

11. 매일 음식 섭취
게리(사람이름)는 Gen-Xer이다. 그는 아직 30대 초반의 독신자이다. 전문대 교육을 받고 기술 분야에서 뛰어나다. 최근 그는 의사에게서 비만 초기 증상을 진단받았다. 게리는 어떤 기기를 이용하여 그의 일일 음식 섭취량을 추적하고 과식하는 신호를 그에게 보여줄때 중재하도록 만들어 유입 흐름에 가장 낮은 장벽을 디자인하라. 그의 삶은 이것에 달렸다.

제약사항: 모든 기술과 제안들은 반드시 오늘날 사용할 수 있는 것이여야한다.

12. Garbage
평균 중산층의 미국인 가족은 그들의 라이브스타일을 유지하기위해 4천파운드 이상 버린다. 하루기준 대부분은 버려지거나 재활용된다. 미국인들이 버리는 것을 어떻게 스스로 더 인지하게 만들 수 있을까?

기술은 여게서 돕는 역할을 맡았다고 가정하자. 사용자 인터페이스가 쓰레기 처분을 관리하는데 도움을 주게 만들자. 하드웨어와 소프트웨어가 함께 이 문제를 해결하는 가능성으로 자유롭게 재치있게 해보자.

제약사항: 제안된 기술은 오늘날 존재하거나 6개월내에 시장에서 사용할 수 있어야한다.

13. NYC 메트로카드
NYC 메트로카드 시스템은 몇년동안 바뀌지않고 남아있다. 메트로카드 기계의 인프라 비용, 메트로카드를 사기위해 오랫동안 줄을 서서 기다리고, 더러운 기계를 만져야하고, 메트로카드를 잃어버릴 수 있는 잠재성과, 당신 카드를 넣어 쉽게 게임할 수 있는 체제로 도시에 100만달러의 비용이 나가고 사용자 경험에서 필요한 것이 많이 남아있다.

메트로를 매일 사용하는 사용자와 한번만 메트로를 이용하는 멀리서온 방문자에게 물리적인 NYC 메트로카드 없이 이용할 수 있는 새로운 시스템을 디자인하라.

제약사항: 제안된 모든 기술은 오늘날 시장에서 사용할 수 있는 기술이야한다.

다른 과제들
14. 당신이 많이 좋아하고 많이 사용하는 앱을 골라서, 어떻게 디자인할지 설명하고 왜 했는지 설명하라.

15. 오늘날 전세계 인구의 54%는 도시에 살며, 2050년에는 66%까지 증가할것으로 전망하고있다. 전반적인 세계인구 증가와 결합된 도시화는 2050년까지 도시 인구에 또다른 25억명이 증가할 수 있는 전방이다. 정부를 도울 수 있고 이 과제를 다룰 수 있는 디지털 제품을 생각해보라.

16. 애완동물 관리는 600억달러 규모의 시장이다. 이런 종류의 서비스 수요를 활용할 수 있는 제품을 생각해보라.

17. 당신이 잘 몰랐지만 Amazon.com이 서비스 하고 있는 타겟 유저를 하나 골라라. 이 유저 타입을 끌기위해 Amazon.com을 어떻게 리디자인할 수 있을까?


우리는 구인중이다
WeWork는 뉴욕에있는 디지털 팀에 조인하기위해 재능있는 제품 디자이너항상 찾아보고 있다. 사람들이 일하는 것과 삶을 어떻게 바꿀지에대해 이야기를 더 들어보고 싶거나, 이 일에 동참하고 싶으면 나에게 한줄 남겨달라.

Ariel Verber, Shem Magnezi, Andrew Couldwell에게 감사하다.


이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,
제목: WWDC 2017 Viewing Guide

다른 년도, 다른 WWDC 그리고 더욱 많은 세션들을 이해하기위해서 준비했다. 이 글에서는 이번년도 가장 흥미있는 세션을 위한 나의 가이드를 공유한다.

기계학습, 드레그 앤 드롭, Xcode9
제일 먼저 Platform state of the union이 좋다.
  • Platforms State of the Union 아직 이 세션을 보지 않았다면, 여기에는 iOS, macOS, tvOS, watchOS의 전반적인 변화들을 발표한다.

이것들은 넘겨보지 말자
개인적으로 내가 가장 좋아하는 것들인데, 여러분은 그냥 넘겨볼 수도 있겠지만 시간을 투자해보는 것도 의미있는 일이 될 것이다.

앱 프레임워크
수많은 좋은 세션들이 여기에 있다. 나는 watchOS, tvOS, macOS 세션까지 넣지는 않았다. 여기에 내가 뽑은 리스트이다.
  • Session 201 What’s New in Cocoa Touch WWDC의 스타같은 팀, Eliza Block와 Josh Shaffer이 돌아와 Cocoa Touch의 바뀐점을 요약해준다.
  • Session 204 Updating Your App for iOS 11 통합된 서치바, 리프레시 컨트롤, 오토레이아웃 지원과함께 새로나온 큰 타이틀 네비게이션 바(large title Navigation bar)를 다룬다. 새로운 레이아웃 마진(layout margin)은 뷰컨트롤러의 루트뷰 세팅에대한 가이드를 하고(이제 시스템 최솟값을 바꿀 수 있다) 세이프 영역(safe area)는 상단, 하단 레이아웃 가이드를 대신한다. 또한 뷰컨트롤러는 더이상 스크롤뷰의 contentInset으로 더러워지지 않는다. 테이블뷰 셀은 이제 디폴트로 스스로 크기변경이 가능하고 더 쉽게 스와이프 액션을 넣을 수 있다.
  • Session 206 Introducing Password AutoFill for Apps 여러분의 웹 서비스에 로그인 기능이 있다면 쉽게 구현 가능해 보인다. 여러분의 사용자는 iOS 키체인에 증명서를 저장하게 된다.
  • Session 210 What’s New in Core Data 이번년도의 커다란 코어데이터 뉴스는 Core Spotlight 통합과 Persistent History Tracking을 지원한다는 점이다. 후자는 영속 저장소를 갱신하고있는 여러 컨텍스트와 여러 익스텐션의 이슈를 대상으로 한다. 포그라운드로 돌아오는 앱은 일부로 다시 불러오게 하지 않고서 변경사항들을 패치할 수 있다.
  • Session 214 What’s New in SiriKit 아마 예상한것처럼 극적인 변화는 아닐 것이나, 리스트와 노트를 위한 새로운 계획을 받았고 비주얼 (QR) 코드를 보여주는 것도 곧 나올 것이다.
  • Session 219 Modern User Interaction on iOS 애플에서는 이것을 지향하지는 않을 수 있지만, 여러분은 이제 컨트롤센터, 노티피케이션, 액션을 넘은 슬라이드가 발생하기 전에 스크린의 모서리에서 일어나는 시스템 스와이프를 가로챌 수 있다.
  • Session 225 What’s New in Safari View Controller 여러분의 앱에 더 매칭시키기위해 바(bar)와 틴트 칼라(tint color)를 커스터마이징 한다. 드레그 앤 드롭에대한 지원을 탑재한다. 이제 각 앱은 사파리 브라우저와 별개로된 고유의 쿠키 저장소(jar)를 얻었다. 취소나 닫기를 위해 완료(done) 버튼을 변경하고, 공유 시트로부터 활성화를 배제한다.
  • Session 230 Advanced Animations with UIKit 프로퍼티 애니메이터를 사용하는 것에대한 좋은 요약이고, CALayer의 cornerRadius 속성은 이제 애니메이션 가능한 점에대한 좋은 팁이다.
  • Session 235 Building Visually Rich User Experiences 세션 230를 이은 코어 애니메이션의 좋은 팁과 트릭이다.
  • Session 237 What’s New in MapKit 지도에서 여러분의 데이터를 표현할 수 있는 새로운 맵 타입. 새로운 MKMarkerAnnotationView는 주석들이 겹칠때 이것을 묶어준다.
  • Session 241 Introducing PDFKit on the iOS CoreGraphics 위에 만들었지만 현대의 스위프트와 Objective-C API를 지원한다. PDF 문서를 더 쉽게 보고 주석을 달기위해 만들어졌다.
  • Session 242 The Keys to a Better Text Input Experience 높이를 변경하거나 커스텀 인풋 뷰를 넣은 키보드를 다루는 여러 방법을 소개한다. 사용자가 선택한 키보드가 어떤것인지 앱이 기억하게 만들 수 있다. iOS는 똑똑하게도 자동으로 따옴표와 대쉬를 바꿔준다.
  • 개발바들을위해 애플은 동적 타입을 지원하여 계속해서 밀고있다. iOS11에서 큰 변화로는, 모든 스타일이 이제 여분의 큰 접근성 크기로 커진다(예전에는 바디 스타일만 가능했다). 또한 애플은 UIFontMetrics를 사용하여 커스텀 폰트도 쉽게 지원할 수 있게 만들었다. 어셋(asset) 카탈로그에서 PDF vector asset은 이제 벡터 데이터를 저장할 수 있게 설정할 수 있다.

드래그 앤 드롭
이번년도의 커다란 UIKit 증진사항은 앱간의 드래그 앤 드롭을 지원한다는 점이다.

여러분이 시간이 있다면 아래 세션은 더 깊은 내용을 담고 있다.
자연어 처리(NLP, Natural Language Processing), 기계 학습(ML, Machine Learning), 증강 현슬(AR, Augmented Reality)
애플이 밀고 있는 이번년도의 또다른 큰 테마는, 우리 앱에서 NLP, ML, AR을 쉽게 사용할 수 있게 만들고 있다는 점이다. 또한 애플은 개인정보, 속도, 낮은 지연율에 대한 이점을 강조했는데, 클라우드 기반 서비스 없이 기기에서 가능하기 때문이다.

스위프트
스위프트 에볼루션 과정이 공개로 됨으로서 새로운 스위프트4를 보기위해 WWDC까지 기다릴 필요가 없어졌다. 그럼에도 잘 정리해 놓았다.

개발 
Xcode9는 스위프트를 크게 돕기위해 리팩토링 지원에대한 업데이트를 보고 있는것 같다.

디자인과 접근성
애플이 계속해서 개선하고 강조하는 부분으로, 모두를 위한 앱 디자인과 제작에서 필요한 점을 볼 수 있다.
  • Session 110 Convenience for You is Independence for me Todd Stabelfeldt (aka the Quadfather)는 8살때부터 사지마비가 왔는데, 접근성 제작으로 다른 앱 디자인을 만들어 그의 발표에서 영감을 얻자. 만약 여러분 앱의 접근가능함에 의심이 된다면 그가 손으로 사용하는 스위치 컨트롤 시연을 보자 (가끔 혀를 쓰기도 한다).
  • Session 215 What’s New in Accessibility iOS11 사용자를 위해 나온 일반적인 접근성 기능 몇개가 크게 개선되었다. 여러분은 이제 텍스트로 시리와 인터렉트할 수 있다. 모든 시스템은 동적 타입을 위해 감사(audit)할수 있게 되는데, 이제 모든 스타일에 최고로 큰 접근성 크기를 사용할 수 있다(여러분의 UI에서 테스트해보라!). 이제 VoiceOver은 이미지 안에 있는 텍스트를 인지해서 말할 수 있고, 컨테이너 타입(container type) 지원이 개선되었다. 마지막으로 당신이 드래그 앤 드롭 지원을 고려하고 있다면 접근성을 고려하는 것도 잊지 말자.
  • Session 803 Designing Sound Highly entertaining talk on using sound including how some of the familiar Apple system sounds are created.

보안과 네트워킹

앱 스토어
여러분이 앱내구매(IAP, In App Purchase)를 사용한다면 앱스토어에서 바뀌게될 부분을 주목하자. 아래 두 세션을 추천하고 싶다.
  • 몇몇 멋진 개선이다: 올해 후반기에 TestFlight 제한이 10,000명 사용자로 올라갈 것이다. 더이상 iTunes Connect에서 앱 아이콘을 관리할 필요가 없다. 앱 부제목과 프로모셔널 텍스트 필드가 있다. 20 API까지 올렸다. 단계별 배포(phased release).

미디어
요점은 MusicKit이 Apple Music API에 접근할 수 있게 된 것과 Photos API가 바뀐 부분이다. 이미지 피커(image picker)는 과정에서 사라졌으며, 따라서 사용자는 허가를 묻지 않고 이미지를 선택할 수 있다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.


WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,
제목: Yeah, redesign(Part 1)

모바일 세상에서 어떻게 리디자인에 접근할 수 있을까

나는 디자인 수석으로서, 항상 내 자신에게 이렇게 질문한다. "우리 팀이 사용자에게 어떻게 최고의 제품 경험을 계속해서 전달할 수 있을까?" 내 대답은 항상 같다. '급격하게 변하는 커뮤니티에서 변화하고 진화하는 사용자의 기호를 항상 고려해야한다.' 그러나 제품 경험을 리디자인하는 것이 방법이라면, 시작된 프로세스를 얻어내기 위한 내부 토론을 어떻게 시작할까? 제품 아이덴티티는 유지한채로 새로운 기능과 디자인의 균형을 맞춰가며 확장가능할 솔루션을 어떻게 달성할 수 있을까?

여러분도 비슷한 디자인 과제를 안고있다면, 아래 질문들의 대답을 찾아가며 이 글이 어느정도 도움이 될 수 있을 것이다.

  1. 그 사용자가 이미 사랑하고 있을때 왜 제품을 리디자인해야할까?
  2. 어떻게 데이터 주도 회사의 패이스에 맞춰가며 리디자인을 시행할까?
  3. 결과물을 어떻게 측정할까?
  4. 다음 단계는 무엇일까?

이 질문에대한 답변을 찾는데 우리 메인 제품인 Sing! Karaoke가 겪은 리디자인을 공유하고, 우리 팀이 이 방법으로 어떻게 난과을 극복했는지 보여주고 싶다.

2년하고도 6개월전에 내가 처음 회사에 들어왔을때, 각 앱(Sing! Karaoke, Magic Piano, Autiharp, Guitar)마다 배치된 팀이 하나씩 있었다. 각 팀은 디자이너 한명, 프로덕트 메니저 한명, 그리고 두명의 엔지니어로 구성된다. 서로다른 성장 속도로인해 Smule 식구중에 Sing!이 선두에있는 앱이 되었다. 회사는 앱 기반 개발 구조에서 기능 기반 구조로 초점을 바꾸기 시작했다. Sing에 기능을 추가하는데 더 많은 노력이 들어가고 디자이너들 사이에 디자인 협업이 더 많이 필요하게 되었다는 의미이다. 사업이 바뀌면서 우리는 기존의 제품 디자인과 프로세스는 팀을 키우고 사용자를 만족시키는데 요구사항이 충족되지 못했다는 것을 알았다.

리디자인을 단지 한 프로젝트에만 적용시키는게 아니라 우리 사용자와 디자이너, 프로덕트 매니저, 인지니어, 이사원들을 끌여 들여야 한다는것을 알았다. 당사자들은 리디자인의 목적을 위해 초기 단계에 얻고 리디자인이 어떻게 진행되어야하는지에대한 피드백을 받음으로써 4가지 범주에서 리디자인이 달성하고자하는 명확한 목표를 설정할 수 있게 도와준다(Have these parties buy into at early stage for the reasons of redesign and provide feedback for “how” the redesign should happen helped us set a clear goal what redesign would achieve in four areas).


  • 사용자 경험 증진하기(Improve user experience)
  • 디자인 팀을 확장가능하게 만들기(Empower design team for scale)
  • 제품 인게이지먼트 증진하기(Increase product engagement)
  • 유지가능한 공학적인 솔루션 만들기(Build a sustainable engineering solution)

1. Sing!의 사용자 경험 증진하기
Sing! 경험에 일관성과 지속성 만들기
수많은 사용자 연구에서 사용성에 가장 강력하게 기여하는 녀석 중 하나가 일관성이라는 것을 알고있다. Sing!은 많은 기능으로 즐거운 제품이다. 이 제품이 2012년도에 출시되었을때는 더 적은 기능과 작은 사용자 기본을 가졌었다. 이런 적은 기능들은 서로 다른 문맥에서 분리된 컨텐트를 표현하기위해 서로다른 칼라를 쓰는 디자인의 결과를 낳았다. 예를들어 이전 버전의 Sing!은 다양한 사용으로 'Call to Actions'를 표시하는데 4가지 이상의 칼라를 사용했다. 예전 디자인이 사용자를 즐겁게하는 목적에 맞춰져있는동안 이런 여러 칼라 CTA(wiki, 역자가 이해한바로는 CTA는 광고버튼 등을 의미함)는 새로운 사용자를 혼란스럽게 만든다는 사실을 알아냈다. 현재 사용자 경험을 증진하기위해서 리디자인은 일관적인 UI 랭귀지를 설립할 필요가 있다는 의미이다.

새로운 사용자 인게이지먼트(engagement, 참고링크) 증진하기
컨덕팅 사용자 연구(Conducting user studies)에서는, 새로운 사용자는 그들의 (다른 앱이나 제품으로부터 UI 인터랙트했던) 예전 경험을 가져와서 처음 Sing!의 인터렉션 기능처럼 동작할거라 생각한다는 것을 인지해야 한다고 말한다. 그리고 아주 중요하게도, Sing! 인터페이스가 사용자 경험에 일치하지 않았을때는 그 인터페이스를 배우고 이해하는데 추가적인 에너지가 소비되고, 이것은 새로운 제품을 관심있게 시도해보게 만들기도 하지만 생소한것을 겪어야하기도 하게 만든다. 리디자인 과정에서 개발해온 패턴을 매칭시키기위해 표준적인 UI가 증가하거나 커스텀 UI를 바꾸는 것이 사용자들에게 더 빨리 더 쉽게 제품에 친숙해지게 돕는다는 생각했다. 이렇게하여 사용자들이 빨리 더 나은 인게이지먼트의 제품을 자연스럽게 이해하는데 도움을 줄 수 있다.

기존에있던 사용자 잔존율을 증가시키기
앱과의 인터렉션에서의 비용은 육체적(physical)으로나 정신적(mental)으로 둘 다 측정가능하다. 육체적 비용은 사용자가 필요로하는 특정 목표를 달성하는데 몇 단계인지 측정한다. 정신적 비용은 사용자가 한 작업을 완료시키거나 어떤 목표 혹은 스트레스(stress)를 달성하기위해 필요한 내제적, 외부적 인식 로드를 측정한다. 예를들어 Sing!의 사용자들이 다른 사용자와 듀엣을 시작하길 원할때, 이 목표를 달성하기위해 다중 UI로 넘어간다. 이것은 컨텐트의 이해를 돕지 못하여 시간적으로나 스트레스적으로 비용이 드는 것이다. 여기에는 명확한 표준적 인터렉션과 UI 디자인의 계획과 신조로 사용자의 육체적, 정신적 비용을 줄일 것이다.




2. 디자인 팀을 확장가능하게 만들기
Sing!을 위한 새로운 폰트 만들기
Sing!은 Gotham 폰트로 시작했었다, 이 폰트는 뉴욕시티의 중세 건축에서 착안되었다. Gotham은 Smule의 제미와 기발함, 환영하는 기분을 알리기위한 훌륭한 폰트이다. 오늘날까지도 Smule의 브렌드 아이덴티티로 표현되고 있다. 그러나 Gotham은 보통 인쇄나 미디어 어플리케이션에 사용되는 폰트이다. 모바일 기기에서 폰트를 사용할때, 많은 이슈를 야기한다. Gotham은 넓은 커닝(kerning, 텍스트가 시각적으로 보기 좋도록 글자간의 간격을 조정한것)을 가지고 있고, 주어진 단어나 문장에대해 너 많은 공간을 차지했다. 모바일 기기는 제한적인 소유지(화면 크기)를 가지므로 디자이너들은 항상 그 텍스트들을 iOS와 안드로이드 둘다에서 잘 보이도록 만들어야하는 추가적인 노력을 해야했다. 그 폰트 크기는 작은 공간에 맞추기위해 여러번 줄여야했고, 이것은 사용자에게 가독성 이슈를 만들었다. Gothan에의한 또다른 이슈로는 낮은 기준선(baseline)이다. 시각적으로 중앙에 놓으려면 이것때문에 수작업을 해야했다. 이런 예시들에서 볼 수 있듯, 결과적으로 개발동안 많은 디자인 이슈를 만났다. 이제는 리니자인을 하면서 해야할 것으로서, 확장가능하고 플랫폼 표준 폰트를 잦는것이 중요한 결정사항이라는 것을 안다.

Sing!은 그 디자인 언어인 표준화가 필요하다.
디자인은 유기적(organic)이기도하고 향수를 불러일으키기(nostalgic)도한 창의적인 과정이다. 표준 UX/UI 디자인 가이드라인이 제자리에 없이는, 프로젝트에서 작업하는 각 디자이너의 미학으로 이 제품은 뒤죽박죽이 될것이다. 이런 디자인으로 계속 작업하다가는 디자인 팀에서 혼란을 만들고, 디자이너 결과물의 한계와 질이 떨어진 제품을 만들었다. 우리의 예전 Sing! 디자인 표준이 명확하게 정의되있지 않았다는걸 알았다. 이런 모호함은 디자인 비평/검토 과정을 더 지연시키고 더 힘들게 하였다. 팀에서 누구도 우리가 목표로 하고있는 디자인 표준을 분명하게 말할 수 없었을때, 모든 피드백이나 리뷰는 개신 선호에따라 판단되었으며, 결국 대부분 정당성을 입증할 수 없었다. 한 팀으로서, 사용자에게 최고의 제품과 경험을 제공하기위해서는 협력적인 노력이 들것이라는 것을 인지했다. 결국 리디자인하고 앞으로 나가기위해서는, 모든 디자인 팀원들간에 소통할 수 있는 명확한 표준이 필요했음을 깨달았다. 우리는 팀에의해 모든 제품 디자인 결정사항에대한 표준을 설정하였다.

디자인팀에서 거대한 성장은 몇가지 규칙들을 설립해야한다는 것을 알게 만들어주었다. 이 가이드라인은 IA, 레이아웃, 폰트, 칼라, 그림요소(imagery), 인터렉션을 다루는 법을 세울 것이다. 이 가이드라인은 디자이너들이 한번에 올바른 디자인 결정을 만들 수 있도록하는데, 디자인 프로세스를 절감해 많은 디자인 이슈에 적용할 수 있는 프레임워크가 될 수 있다. 더욱 중요하게도 디자인 팀은 우리의 스타일, 요소, 패턴을 문서화하여 가지고 있어야하는데, 공유되고, 중앙 저장소이고, 필요한만큼 빈번하게 업데이트되야한다. 한곳에 공유된 중심원(hub)이 있으면 디자인의 일관성을 증진시킬 수 있으며, 뿐만 아니라 디자인의 질과 양도 따라온다. 즉 디자인팀은 Sing! 리디자인으로 가이드라인을 만들어낼 필요가 있었으므로, 분리되고 개인적인 디자인을 줄이고, 외관상으로 일관적이게 남길 것이다. 이것이 우리의 목표이며, 결국 디자이너들은 세세한 아이콘으로 작업할 수 없고 올바른 명세가 무엇인지 생각할 수 없을 것이다. 대신 사용자를위한 더 창의적인 디자인 솔루션에 집중할 수 있다.

디자인팀은 규모가 확장되야할 필요가 있다
제품에 추가되고있는 기능이 많아지고 더 많은 Sing 사용자가 생기면서, 우리 디자인 팀은 협력을 성장하고 증진할 필요가 있다. 협력을위한 기본적인 틀의 작은 블럭을 만드는 공통된 이해 없이는, 팀에게 이런 성장을 유지하기위해 넣는 압력은 복잡해진 의사소통을 만들 수 있다. 우리 팀이 잘하고있다는 확신을 위해서, 우리는 디자인 접근법과 워크플로우를 모듈화시켜야 한다는 점을 알았다. 이 말은,  리디자인팀이 작은 블럭을 만들며 디자인을 만들어야할 필요가 있다는 뜻인데, 이 블럭은 리디자인의 기초가 되고 모든 디자인 노력(effort)이 될것이다. 이렇게 각자가 블럭을 만드는 것은 디자이너들이 쉽게 협력할 수 있게 해주고 필요에따라 작업을 쪼개게 해준다. 게다가 새로운 디자이너가 오면, 기존의 팀원이 프로젝트를 이끌기위해 블럭을 만드는 것을 활용할 수 있고, 새 맴버를 위한 일정을 명확하게 정할 수 있게 된다.




3. 제품 인게이지먼트 증진하기
새 사용자에게 내장된 경험 증진하기
새로운 사용자가 새 앱을 쓰려고 할때, 한번에 두가지를 배우는데, 첫째로 앱의 기능이고, 둘째로 이 기능을 어떻게 쓰는지이다. 명확하고 표준화된 UI/UX 디자인이 없으면 사용자는 앱에서 개별적인 인터페이스 요소를 완전히 소화하지 못할 것이다. 사용자에게 인터페이스 디자인을 소개하는 것보다 제품 기능 사용에대해 초점을 맞추기 때문에, 우리는 새로운 사용자의 기대를 이해하고 그들에게 명확하게 유용한 정보를 전달해야했다. 전반적으로 새 디자인은 앱의 혼란스러운 부분을 간단하게 만들어야했고, 사용자들이 새 기능을 시도하고 인터렉트함에 편안하도록 해주어야 했다.

사용자 잔존율(retention)을 증가시키기
Smule에서는 새 사용자가 앱을 처음 경험하고나서 이후에 얼마만에 다시 돌아오는지(예를들어 2일이나 7일같이) 정의하여 사용자 잔존율을 면밀히 모니터링한다. 만약 사용자의 첫번째 경험이 좋지 않았다면, 이틀연속 다시 돌아오기 힘들 것이다. 사용자 연구를 통해 알아내었는데. 사용자들이 처음하는 시점에서 기능을 찾아내면 많은 기능들을 즐긴다. 혹은 이미 있는 기능들을 요청했다. 이런 발견으로부터 우리 디자인 안내가 사용자의 유지를 잡지 못하고 있음을 의미했다. 만약 디자인이 사용자의 생각속에 있는 기능을 어디서 찾고 어떻게 접근하는지 알려주지 못한다면 사용자들은 혼란에 빠지고 Sing을 계속 사용하고 싶다는 흥미를 잃어버리게 될것이다. 리디자인으로 사용자 잔존율과 제품 사업 목표를 만족시키는 더 나은 안내를 고안해내야한다.

개발과 배포 사이클 증진하기
2014년도에 리디자인을 고려하기 시작할때부터 iOS와 안드로이드에서의 제품 기능을 동일하지 않았다. Sing! iOS는 Sing 안드로이드보다 더 많은 기능이 있었다. iOS와 안드로이드간의 일관성 부재는 디자인 팀에게 일거리를 두배로 주고 개발 사이클을 지연시켰다. Sing!은 우리가 리디자인을 생각하기 시작할때부터 많은 사용자들이 생겼었다. 제품 디자인과 개발 사이클에 추진력과 속도를 높히고 싶었다. 이런 마음을 가지고 우리는 내부 디자인 팀의 워크플로우와 효율을 올리는데 리디자인이 필요하다는 것을 알았다. 리디자인으로 디자인과 개발 시간을 50%나 줄일 수 있었고, 이것은 현재 리소스로 새로운 기능을 테스트하고 배포하는데 더 많은 기회를 줄 것이다.




4. 유지가능한 공학적인 솔루션 만들기
개발 프로세스 증진하기
부조화스러운 UI는 사용성 이슈를 만들 뿐만 아니라 디자이너와 엔지니어들에게 추가적인 작업 과중을 안겨준다. 예를들어, 디자이너들은 한 아이콘일지라도 여러 시나리오에서 사용될 여러 칼라와 사이즈로 아이콘들을 만든다. 엔지니어에게 이 아이콘들을 올바른 화면에 놓게 하기위해 아이콘들을 만들고 명세하는데 디자이너들은 추가적인 40% 시간이 더 든다. 엔지니어도 이 명세를 따르고, 각 아이콘이 올바르게 위치하도록 커스터마이징된 코드를 짜야한다. 말은 쉬워보이지만 다양한 화면 크기나 플랫폼(iOS와 안드로이드)에 부딪혔을때 이 프로세스는 끔찍해진다. 엔지니어와 이야기하고나면 디자이너와 엔지니어 모두 더 나은 방법으로 서로 협력하고 싶어한다. 여기서 리디자인의 필요성에대한 서로다른 관점이 나온다. 디자이너와 엔지니어가 어떻게 효율적으로 제품을 설정하고 만들지에대한 체계적인 방법을 만들자.

제품 개발 품질을 증가시키기
디자인 QA를 하는것과 올바르게 구현되었는지 확인하는 것은 디자이너의 책임이다. 디자이너와 엔지니어에게 가장 비극의 순간은, 디자인 부분을 변경하다가 생긴 디자인 버그를 엔지니어가 수정하는 것인데, 여기서 또다른 버그가 만들어진다. 이때문에 엔지니어는 디자인 버그를 고치는데 더 많은 시간이 들고, 그 구현이 버그없이 디자인과 일치한다고 보장할 수 없었다. 앞단에 나오는 모든 디자인 버그를 해결하기위한 리디자인을 요구하는것은 비현실적이라는 것쯤은 우리도 안다. 그러나 마진을 어떻게 줄것인지, 아이콘 사이즈를 어떻게 만들것인지, 누른 상태는 어떻게 적용시킬지 등에 대한 표준의 중심 디자인 가이드라인을 만들어서 예전과같은 일이 일어나지 않게 할 수 있다.

세계 현지화 준비하기
리디자인에대한 생각을 시작할쯤에 Sing은 US 중심의 앱에서 다국적인 제품으로 옮겨가고 있었다. 세계 사용자에게 소통하기위해, 우리는 12가지 언어에서 20가지 언어로 현지화 시켜야 했다. 영어기반 앱을 외국어로 적용시킬때 UI는 쉽게 망가질 수 있다. 예를들어 영어와 독일어/러시아어를 비교해보면 같은 의미라도 독일어/러시아어가 더 많은 문자로 표현된다. 영어 레이블에 맟춰놓은 제한된 공간에서는 독일어와 러시아어가 제대로 작동하지 않을 수 있었다. 공간을 설정하고 올바른 계층을 적용시는 규칙을 명확하게 하지 않고서는 현지화된 언어가 작은 사이즈로 표시되거나 짤리게 될 것이다. 언어 하나하나 이 이슈를 해결하면서 엔지니어와 QA에 어마어마한 수고가 들어갔다. 리디자인을 통해 미래에는 서로다른 모든 언어를 최적화할 수 있는 유지가능한 솔류션을 찾아야한다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,
제목: Design words with data


우리가 작성하는 것을 어떻게 데이터로 알 수 있을까?

쓰는것은 양식의 예술이다. 단어는 우리를 웃게 만들기도 하고, 울게 만들기도 하며, 멋진일을 하는데 영감을 주기도 한다.

그러나 나는 쓰기에도 과학이 있다는 것에 대해 오늘 이야기해보고 싶다. 우리는 데이터로부터 어떻 용어를 쓸지에 대한 정보를 제공받고 그 용어에대해 객관적으로 생각하게 해준다.

무엇이 옳고 무엇이 그른가?
나는 드롭박스의 UX 작성자로서, 우리의 목표는 모든 사람들이 우리가 사용하는 모든 단어를 이해할 수 있게 만드는 것이다. 잘못된 단어 하나라도 사용자 경험을 파괴할 수 있다. 모호한 버튼의 글자 하나나 익숙하지 않은 용어는 사용자를 쉽게 낙담시킨다.

우리가 옳바른 단어를 골랐음을 확신하려면, 쓰기에대해 정보에 근거한 선택을 하기위해서 조금 특별한 기술들을 사용하고 있다.

1. Google Trends
몇몇의 용어들 중에 적절한 것을 선택해야한다고 가정해보자. 예를들어 다음 중에 어느것을 여러분 제품에 사용할 수 있을까?

* Log in
* Log on
* Sign in
* Sign on

첫번째로 소개할 것은 Google Trends이다. 쉼표를 기준으로 비교하고 싶은 단어를 모두 입력해 넣으면 된다. Google Trends는 사람들이 Google에서 이 단어를 얼마나 자주 검색했는지 비교해준다. 그 검색은 자동으로 "페이스북은 log in" 혹은 "Sign in은 안된다" 같은 말도 포함된다.

그래서 Google Trends는 어떤 결과물을 보여줄까?

Google Trends를 사용한 용어비교Google Trends를 사용한 용어비교


짜잔! 여기선 깔끔하게 Sign in이 이겼다. 이 말은 사용자들이 이 동작을 부를때 "Sign in:을 더 많이 쓰는 것으로 보인다. 당신이 사용자 경험에 단어를 맞추려면, 다른 것보다는 "Sign in"을 고르는게 더 안전할 것이다.


드롭박스에서는 "Version history" 기능을 표현할때 각기 다른 용어를 쓴다는 것을 발견했다.


우리는 이런 부조화를 고치고 싶었으나 어떤 용어를 사용해야할지 확신이 서지 않았다. "version history"라 해야하나, 아니면 "file history"? 우리는 여러개 고려대상 중, Google Trends의 결과로 그 한가지를 뽑아냈다.

Google Trends에서는 "version history" 검색이 더 많아보이게 나왔고, 우리가 제품 전반에서 "version history"라 부르는 가장 큰 이유가 이것이다. 

2. Google Ngram Viewer
Ngram Viewer는 Google Trends와 비슷한데, 구글이 스캔한 출판된 책에서 검색한다는 점만 다르다. 여러분은 이 데이터를 이용하여 여러분의 언어에서 어떤 용어가 더 일반적으로 쓰이는지 볼 수 있다.

드롭박스는 최근에 iOS앱에 새로운 서명 툴을 출시했다. 여러분의 서명을 그리는 화면에서, 이것을 검토하기 전에는 "Sign Your Signature"이라 적어놓았었다.

우리도 "Sign Your Signature"가 이상하게 보인다는 점을 인지하고 있었으나, 이상하게 보인다는 이유로 이것을 바꿀 순 없었다. 어떻게 이 변경을 납득시켰을까?

Ngram Viewer를 보여주며 "Sign Your Signature"과 "Sign Your Name"을 비교했을 때이다. 이것은 "Sign Your Signature"이 좋지 않음을 보여주었다. 이 데이터를 팀에게 보여주니 그들은 빠르게 "Sign Your Name"으로 바꾸어주었다.

Ngram Viewer를 사용한 용어 비교Ngram Viewer를 사용한 용어 비교


3. 가독성 테스트
몇년동안 언어 전문가들은 여러분의 단어가 어떻게 쉽게 이해되는지 측정해주는 여러 가독성 테스트를 개발해왔다.

이 테스트의 많은 것이 여려분이 쓴 것의 등급을 매겨줄 것이다. 예를들어 8등급이라는 의미는 US에서 일반적으로 8등급이 여러분이 쓴 거을 이해할 수 있다는 뜻이다.

나는 이 테스트중 하나를 사용해 내 Medium 이야기(How to design words)를 하나 돌려보았다. 아래에 그 결과이다.

Readability-Score.com의 결과Readability-Score.com의 결과


여기서 아주 흥미로운 데이터를 얻을 수 있다. 예를들어
  • 나는 6등급으로 이야기를 썼다.
  • 내 어조가 중립적이지만 약간 긍정적이다.
  • 나는 문장당 평균 10.7 단어를 쓴다(드롭박스에서는 문장을 15단어 이하로 쓰려고 노력하고 있다).

이런 테스트 중 하나를 받아보고 싶다면 아래에 몇 시도해볼 수 있는 링크를 준비해놓았다. 이 중 몇개의 테스트는 더 좋은 가독성으로 작성하기 위한 수정도 제안해줄 것이다.

4. 리서치 조사
새 기능에 어떤 이름을 붙일지 알아보고 있는가? 아니면 어떤 가치관에 집중하는가(Or what value prop to focus on)? 이런 상황에서는 리서치 조사를 세팅하는게 도움이 될 수 있다.

많은 조사 툴이 여러분의 타겟 대중을 선택할 수 있게 해준다. 따라서 잠재적 사용자로부터 쉽게 피드백을 받을 수 있다.

아래에는 여러분이 연구 조사를 설정할 수 있는 몇가지이다.
드롭박스는 우리 제품을 사용하는데 가장 큰 이점이 무엇인지 물어보는 설문조사를 시행했다. 대부분의 사람들이 "접근"이라고 대답했다(어떠한 기기에서도 내 파일을 가져올 수 있는 능력). 결론적으로 우리는 대문 페이지를 '접근'에 맞춰 다시 디자인하게 되었다.


5. 사용자 연구
사용자 연구는 여러분이 작성한 것에 대한 피드백을 받을 수 있게 해준다. 일반적으로 사용자 연구에서는 여러 사람들 초대해 글을 읽게 하거나 제품을 사용하게 한 다음 그것에 대해 질문을 한다. 이런 것은 여러분이 작성한 것이 이해되었는지 아닌지 알아보기에 매우 좋다.

우리의 조사자 중 한명은 최근 새로운 흐름을 테스트했던 연구를 진행했다. 거기서 말한 한 단계이다.
Select "Remove local copy" to save space
사용자가 이 기능을 사용할때 질문해보았다. 대부분 이 기능을 이해나는데 힘들었고, 유용하다고 생각되지 않았다. 그래서 사용자에게 유리한 말을 앞쪽으로 놓음으로서 단어의 순서를 바꾸었다.
Save space by selecting "Remove local copy"
이번에는 참여자들이 이 기능을 사용할때 훨씬 쉬웠다고 말해주었다. 그리고 우리는 모든 단어의 순서를 바꾸었다.

자성자의 직감이 어떻게 경험으로 바뀔수 있는지 보여주고, 여러분은 다른 디자인 선택처럼 테스트할 수 있다.

마음으로 쓰고 머리로 고치자
특정 용어를 선택하려 할때는 데이터가 유용할 수 있다. 그러나 이 말뜻이 기계처럼 작성하라는 의미는 아니다.

내가 본 바로는, 먼저 마음으로 초안을 그린다. 당신의 결단력을 믿자. 그러고나서 당신의 생각을 써내고 이제 단어를 다듬기위해 조사나 데이터를 찾아보면 된다.

글쓰기는 예술이자 과학이다. 마음으로 쓰고 머리로 고침으로써 근거있고 유악한 것을 만들어낼 수 있다.

데이터는 작성자에게 편리함을 제공한다. 데이터는 여러분이 쓴 것이 "옳도록" 만든다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,
제목: How to use colors in UI Design


실질적인 팁과 도구들


색은 모든것과같고(Color is like everything else), 알맞게 사용하는 것이 최고이다. 여러분의 칼라 스킴에서 색을 최대 세가지로 제한하면 더 나은 결과물을 낼 수 있을 것이다. 디자인 프로젝트에 칼라를 적용시키는것은 균형을 맞추는 수많은 작업을 가지며, 더 많은 칼라를 사용할수록 그 균형을 맞추기 더 복잡해진다.


칼라는 디자인에 좋은 품질을 더하지 않는다-더 강력하게 만든다.
Pierre Bonnard

여러분 팔랫트에 정의해놓은 것에서 색을 추가해야 한다면, 쉐이드와 틴트를 사용하자. 이것은 다른 톤으로 작업할 수 있게 해준다.

60-30-10 규칙
이 인테리어 디자인 규칙은 시대에 상관없이 칼라 스킴을 쉽게 서로 놓게해주는 데코레이팅 기술이다. 60% + 30% + 10% 균형은 칼라에 균형을 맞춰준다. 이 공식은 균형에대한 이해를 만들어주고 집중하는 지점에서 다음까지 눈을 편안하게 이동할 수 있게 해주기때문에 잘 먹힌다. 또한 사용하기에도 매우 간단하다.

60%는 주요 색상(dominant hue)이고, 30%는 두번째 칼라, 그리고 10%는 강조하고싶은 칼라이다.



칼라의 의미
과학자들은 몇세기동안 특정 칼라에대한 심리적 영향을 연구해왔다. 미학 외에도 칼라는 감정(emotions)과 연상(associations)의 창조자다. 칼라의 의미는 문화와 환경에따라 다양하다. 이것이 왜 흑&백 패션 매장을 보는지의 이유이다. 그들은 우아하고 숭고해보이고 싶다.


  • 빨강색: 열정의, 사랑의, 위험한
  • 파랑색: 고요한, 책임감있는, 안전한
  • 검정색: 미스터리한, 우아한, 악의
  • 하얀색: 순수한, 고요한, 깨끗한
  • 초록색: 새로운, 신선한, 자연의

더 많은 리스트를 보고싶으면 color culture를 확인해보자.

먼저 그레이스케일부터
디자인에서 처음부터 칼라와 톤으로 작업하고싶어하지만, 이런 행동은 당신이 주요 칼라를 조정한다고 3시간을 쓰고있다는 것을 알아차렸을때 당신은 배신해버릴것이다... 매우 매혹적이긴하나 이런 태도를 피하는 법부터 배워야한다.

대신에 공간을 정하고 요소들의 레이아웃을 잡도록 해야한다. 이렇게하면 여러분의 많은 시간을 단축시킬 것이다. 몇 제약은 매우 생산적이다. 필립(flips)은 지루하지 않게 보여야한다. 좋게 보이려면 다른 톤을 시도해보자.


순수한 그레이스케일과 점정으로부터 떠나기
내가 배웠던 가장 중요한 칼라 기법중 하나는 채도없는 그레이 칼라 사용을 피하는 것이다. 실제 세상에서 순수한 그레이 칼라는 거의 존재하지 않는다. 검정도 마찬가지이다.

여러분의 색에 조금이라도 채도를 항상 넣자. 잠재적으로 사용자에게 더 자연스럽고 친근하게 보일 것이다.




자연을 믿자
최고의 칼라 조합은 자연에서보터 나온다. 그들은 항상 자연스러워보인다. 디자인 솔루션을 위한 환경을 찾는 가장 좋은 방법은 항상 팔레트가 바뀐다는 점이다.
영감을 얻기 위해서는 단지 주변을 둘러보면 된다
대비를 기억하자
몇 칼라들은 서로 잘 맞지만, 다른 것들은 그렇지 않을 수 있다. 칼라 휠에서 가장 잘 관찰되는 인터렉트가 무엇인지에대한 명확한 규칙들이 있다. 이 방법을 알고 있어야하지만 손수 할 필요는 없다.


여러분이 칼라 이론에대해 더 배우고 싶다면 이 글을 확인해보자-Color Theory For Designers: Creating Your Own Color Palettes


영감을 얻자
UI 참조에대해 이야기할때는 dribbble이 최고이다. 칼라로 검색하는 도구도 가지고 있어서, 다른 디자이너들이 사용한 특정 칼라에대한 시각적 조사를 하고싶으면 여기로 가보자 dribbble.com/colors


비디오, 출력 디자인, 인테리어 디자인, 패션... 그 많은것이 한곳에 모여있다. 이 팔랫트에서만 있지말고 관심있는 모든것을 저장하자.

  

종종 나는 KPOP 비디오클립에서 칼라를 따내기도한다. 이것들은 매우 훌륭하다.

도구들
쉽게 작업하기위해, 2017년에 사용할 수 있는 칼라 파랫트의 최고의 툴들을 묶어보았다. 이것들은 여러분의 시간을 많이 단축시켜 줄것이다.

Coolors.co
칼라를 선택하는데 명백하게 내가 제일 좋아하는 툴이다. 선택된 칼라에 락을 걸어놓고 공간을 누르면 팔랫트를 만들어준다. 또한 Coolors는 이미지를 업로드하여 그 이미지로부터 칼라 팔랫트를 만드는 기능도 제공한다. 이렇게 멋진 기능은 한 결과물에대해서만 제한이 없지만 대신에 참조 포인트를 수정할 수 있게 해주는 picker를 가진다.



Kuler
이 툴은 어도비에서 나온 툴이며, 긴 시간동안 우리 곁에있었다. 브라우저에서 데스크탑 버전으로 사용할 수 있다. 데스크탑 버전을 사용하고 있다면 포토샵에 칼라 스킴을 내보낼 수 있다.


Paletton
Kuler와 비슷하지만 다섯개의 톤으로 제한되지 않는다는 점이 다르다. 톤을 추가해가면서 주요 칼라가 필요할때 좋은 툴이다.


Designspiration.net
칼라 팔랫트에대한 아이디어는 있지만 그것을 섞은 예시자료가 필요하다고 생각해봐라. Designispiration는 이런 당신을 위한 좋은 도구이다. 5개의 칼라를 골라서 여러분의 쿼리에 맞는 이미지를 검색할 수 있다. 특정 팔랫트로 이미지를 찾을 수 있을 뿐 아니라 디자인에서 실제로 구현된 것이다.

Shutterstock Lab Spectrum
내가 고른 칼라로 사진을 찾고 싶으면 어떨까? 흠, Shutterstock는 특정 톤으로 사진을 찾는 Spectrum이라는 도구를 가지고있다. 검색에 뭔가 쳐넣을 필요가 없는데, 물방울표시로 작은 미리보기 이미지가 팔랫트를 생성해줄 것이기 때문이다.


Tineye Multicolr
그러나 사진에 있는 여러 칼라를 찾고 싶고, 각각의 양을 고르고 싶으면 Tineye가 도와줄 것이다. 이 웹사이트는 Flickr로부터 1000만개의 창의적인 일반 이미지를 데이터베이스에 쓰고 있다.
<동영상, viemo>

마지막의 생각들
칼라는 마스터하기에 힘든 개념이고, 특히 디지털 영역에서는 더 그렇다. 위에서 말한 팁들은 올바른 칼라를 선택하는 일에 도움이 될 것이다. 멋진 색채 스킴를 만드는 법을 배우는 가장 좋은 방법은 여러분 자신을 위해 열심히 연습하고 색을 가지고 노는 것이다.


이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,
제목: Creating Usability with Motion: The UX in Motion Manifesto



역자: 이번 번역글은 늘 번역하던 개발관련 주제가 아닌데다 어려운 용어가 많아서 고민을 많이 했습니다. 제 번역글에서 부자연스러운 부분이나 잘못된 번역이 있다면 편하게 알려주시면 감사하겠습니다.




아래 선언서에는 "UX, UI 디자이너로서, 사용성을 위해 언제 어디서 모션을 구현해야하는지 어떻게 아는가? 질문에 대한 답변이다.

지난 5년동안, 나는 40개국 이상을 다니면서 몇백개의 상위 브렌드와 디자인 컨설던트, UX & UI 디자이너를 코치하고 멘토링하기위해 특별히 기여해왔고 UI 애니메이션에대한 튜토리얼을 했다.

그후 15년동안 사용자 인터페이스에대한 모션을 연구하여, 나는 모션을 사용한 UX 프로젝트에서 사용성에대해 12개의 특정 기회가 있다는 결론에 도달했다.

나는 이 기회를 "모션에서 UX에대한 12가지 원칙"이라 부르며, 이것들은 수많은 창조적인 방법으로 서로 쌓이고 섞일 수 있다.

나는 선언서을 5단계로 나누었다:
  1. UI 애니메이션 주제를 다루기-여러분이 생각하는 그런것은 아니다
  2. 실시간 vs 비실시간 인터렉션
  3. 모션이 사용성을 지원하는 여러방면
  4. 원칙, 기술, 프로퍼티, 값
  5. 모션에서 UX에대한 12가지 원칙

빠른 플러그로, 모션과 사용성에관한 주제에관해 학회나 워크샵에서 야러분의 팀위한 나의 강연을 원한다면, 여기로 가봐라. 여러분의 도시에서 수업에 참석하고 싶으면, classes">여기로 가보아라. 마지막으로 여러분의 프로젝트에대해 컨설팅을 받고 싶으면, 여기로 가면 된다. 내 목록에 추가되려면 여기로 가면 된다.



UI 애니메이션에 관한 것이 아니다
사용자 인터페이스에서 모션에관한 주제는 대부분 디자이너가 'UI 애니메이션'이라고 이해하고 있기 때문에(그렇지 않다), 12가지 원칙에 들어가기 전에 약간의 문맥을 만드는 것을 좋아한다.

디자이너들은 'UI 애니메이션'을 보통 더 즐거운 사용자 경험을 만드는 것이라 생각하지만, 전반적으로 어떤 가치를 더하지 않는다. 그러므로 UI 애니메이션은 종종 UX의 의붓자식처럼 다뤄진다(모든 의붓자식들에게 미안하다). If at all, it usually comes at the end, as a final lipstick pass.

추가로 사용자 인터페이스의 문맥에서의 모션은 디즈니의 12 애니메이션 원칙 문제 아래에 이해할 수 있게 잡혀있는데, 내가 쓴 'UI Animation Principles — Disney is Dead'에서 이야기해놓았다.

나의 선언서에는, 구성을 아키텍트화함으로서, UI 애니메이션은 '모션 원칙에서의 12가지 UX'가 된다는 경우로 만들것이다.

이렇게하여, 내가 말하고자하는 바는, 한 구조는 (요구하는 구성이) 존재하기위해 물리적으로 만들어져야하지만, 무엇이 만들어질지를 결정하는 안내는 원칙의 도메인으로부터 나온다.

애니메이션은 모두 도구에관한 것이다. 원칙들은 도구의 사용이나 그런것을 가이드하는 아이디어들의 실제 응용이다. 원칙들은 디자이너에게 높은 사용 기회를 제공한다.

많은 디자인들이 'UI 애니메이션'를 사실 디자인의 더 높은 형식성의 실행이라 생각한다: 실시간과 비실시간 이벤트동안 인터페이스 오브젝트의 시간적인 동작.



실시간 vs 비실시간 인터렉션
이 접점에서, '상태(state)'와 '동작(act)' 사이의 구별이 중요하다. UX에서 무언가의 상태는 근본적으로 정적이다. 마치 디자인 시안처럼 말이다. UX에서 무언가의 동작은 근본적으로 시간적이고 모션 기반이다. 한 오브젝트가 마스크된 상태에 있을 수 있고 혹은 마스크되고있는 동작에 있을 수 있다. 만약 후자이면, 모션이 포함되있고 때에 따라 사용성을 제공할 수도 있다.

추가로 인터렉션의 모든 시간적 양상은 실시간이나 비실시간으로 일어난다고 생각될 수 있다. 실시간은 사용자 인터페이스에서 사용자가 오브젝트와함께 직접 상호소통한다는 의미이다. 비실시간은 오브젝트 동작이 상호소통 이후에 일어난다는 의미이다: 사용자 동작 후에 일어나고 이동된다.



이 구별은 중요하다.

실시간 인터렉션은 '직접 조작'으로 생각할 수 있는데, 사용자는 인터페이스 오브젝트와 직접적으로 그리고 즉시 소통하고있다. 인터페이스의 이 동작은 사용자가 사용하고 있음으로서 일어난다.

비실시간 인터렉션은 사용자가 입력은 넣은 후에만 발생하고, 그 트랜지션이 완료될때까지 가볍게 사용자 경험으로부터 사용자를 락킹시키는 효과를 가진다.

이런 구별법은 모션에서 UX의 12가지 원칙 세계로 떠나는 여행내내 이용하게 될것이다.


모션은 4가지 방법으로 사용성을 제공한다.
이 네가지 기둥은 사용자 경험의 시간적 동작이 사용성을 지원하는 4가지 방법을 표현한다.

예상(Expectation)
예상은 2가지 영역으로 나뉜다. 사용자가 어떤 오브젝트인지 감지하는것, 그리고 어떻게 동작하는지 감지하는것이다. 디자이너로서 말하자면, 우리는 사용자가 기대하는 것과 그들의 경험 사이의 갭을 최소화시키고 싶다.

연속성(Continuity)
연속성은 사용자 흐름에대해서나 사용자 경험의 '일관성' 둘다에 대한 이야기이다. 연속성은 '내부-연속성'(장면내의 연속성 그리고 '내부 연속성')이라는 용어로 생각될 수 있는데, 일련의 장면에 연속성은 전체 사용자 경험을 만든다.

설명적(Narrative)
설명적은 사용자 경험에서 이벤트의 선형적 과정이다. 이것은 시간적/공간적 프레임워크의 결과가된다. 이것은 처음부터 끝까지 사용자 경험을 연결하는 일련의 인지된 순간들이나 이벤트들로 생각할 수 있다.

관계(Relationship)
관계는 사용자의 이해와 선택을 돕는 인터페이스 오브젝트들 사이에서 공간적인, 시간적인, 계층적인 표현이다.


원칙, 기술, 프로퍼티, 값
Tyler Waye says it as good as any when he writes, "원칙...들은 기술의 어떤 수치를 증가시키는 기능의 약속, 규칙을 근간으로한다. 이런 요소들은 조화롭게 있으며, 무슨일이 일어나도 상관없다." 원칙들은 디자인의 어그노스틱(agnostic)이라는 것을 되풀이한다.

거기서부터, 제일 높은 원칙과 그 아래 기술, 그 아래 프로퍼티, 제일 아래에 있는 값으로서 한 계층을 생각해볼 수 있다.

기술은 원칙의 다양한, 제한이없는 실행들 혹은/그리고 조합들이라 생각할 수 있다. 내 생각에 기술은 '스타일'과 유사한것 같다.

프로퍼티는 기술을 만들기위해 애니메이션하게될 특정 오브젝트 파라미터이다. 이것들은 위치(position), 투명도(opacity), 스케일(scale), 로테이션(rotation), 앵커포인트(anchor point), 색깔(color), 선두께(stroke-width), 모양(shape)등을 포함한다(제한이 없다).

은 우리가 '애니메이션'이라 부르는 그것을 만들기위해 매번 다른 실제 수치의 프로퍼티 값이다.

그래서 여기에 들어가기위해(조금 뛰어들어가기위해), 하나의 가상의 UI 애니메이션 참조는 '블러된 글라스' 기술로 엄폐(Obscuration) 원칙을 사용하고있는데, 이 '블러된 글라스' 기술은 블러(Blur)와 투명도(Opacity) 프로퍼티를 25px, 70% 값으로한다고 말할 수 있다.

이제 해보기위한 몇 도구를 가졌다. 그리고 더 중요한것은, 이런 용어의 도구들은 모든 특정 프로토타이핑 툴의 아그노스틱(agnostic)이다.


모션에서 UX의 12가지 원칙들
이징(Easing)과 오프셋(Offset)&딜레이(Delay)는 타이밍(timing)과 연관된다. 페어렌팅(Parenting)은 오브젝트 관계(object relationship)에 연관된다. 값 변경(Value Change), 마스킹(Masking), 오버레이(Overlay), 클로닝(Cloning)은 모두 오브젝트 연속성(object continuity)에 연관된다. 페럴랙스ㄹ(Parallax)는 시간적 계층에 연관된다. 엄폐(Obscuration), 차원(Dimensionality), 돌리(Dolly)&줌(Zoom)은 모두 공간적 연속성에 연관된다.



원칙1: 이징(Easing)
오브젝트 동작은 시간적 이벤트가 발생할때 사용자 예상을따라 일어난다.



이즈(ease)는 시간적 동작이 나오는 모든 인터페이스 오브젝트이다(실시간이든 비실시간인든). 이징은 부드러운 사용자 경험에서 타고난 '자연주의(naturalism)'을 만들고 그렇게되도록 한다. 그리고 사용자가 기대하는대로 오브젝트가 동작할때 연속성의 이해가 만들어진다. 덧붙이자면 디즈니는 이것을‘Slow_In_and_Slow_Out">Slow In and Slow Out’'라 부른다.

 



왼쪽의 예시는 선형적인 모션이고 '나빠' 보인다. 제일 위에 첫번째 예시는 이징된 모션인데 '좋아' 보인다. 위의 세 예시는 정확한 프레임 수와 정확히 동일한 횟수로 시행된다. 오직 이징에서만 다르다.

디자이너는 사용성을 고민하기 때문에, 미학은 제쳐두고 어떤 예시가 더 사용성을 제공하는지 우리 스스로 엄격하게 요구하고 조사해야한다.

내가 여기서 보여주는 경우는 스큐어모피즘의 특정 수치는 이징에 내제되있다. 사용자 기대를 벗어나는 것이 적은 사용성의 인터렉션이 되는점에서 '이징 그라디언트(easing gradient)'를 생각해볼 수 있다. 사용자 기대치를 벗어나는 동작으로인해 사용가능한 상호작용이 적게되는 '이징 그라디언트(easing gradient)'를 생각해볼 수 있다. 적절히 이징된 모션의 경우에, 사용자는 모션 그자체가 고르고 눈에 걸리지않는 경험을 한다. 주의를 분산시키지 않기 때문에 좋은 일이다. 선형 모션은 명확히 보이고 어찌되었든 완료되지 않은것같고, 거슬리고 눈에 걸린다.

이제 나는 여기서 내 스스로를 완전히 반박하고 옳은 예시에대해 이야기 할 것이다. 모션은 고르지 않다. 사실 그렇게 느끼도록 디자인되었다. 우리는 오브젝트가 어떻게 올라가는지 인지한다.다르게 느껴지지만 여전히 선형의 모션 예시보다 더 '알맞게' 느껴진다.

이징을 적용하지만 여전히 사용성이 없는가(Can you employ easing and still have it not support (or worse case undermine) usability?)? 그 대답은 그렇다. 그리고 여러 방법들이 있다. 한 방법은 타이밍이다. 만약 타이밍이 너무 느리거나(Pasquele에서 빌렸다) 너무 빠르면, 예상을 벗어나고 사용자의 주의를 분산시킬 수 있다. 비슷하게, 이징이 브랜드나 전반적인 경험에 잘못된 선상에 놓이면, 예상과 고름에 부정적인 영향을 줄수도 있을 것이다.

여러분에게 열어주고 싶은 것이 무엇이냐하면, 이징된 모션이 될때의 기회이다. 당신이 디자이너로서 프로젝트에서 만들고 구현할 수 있는 사실상 무한한 숫자의 이징이 있다. 이 모든 이징들은 사용자에서 발생하는 그들의 고유 예상 반응을 가진다.

요약하기: 언제 이징을 사용할까? 항상이다.

원칙2: 오프셋&딜레이(Offset&Delay)
새로운 엘리먼트와 화면이 나올때, 오브젝트 관계와 계층을 정의한다.


오프셋&딜레이는 디즈니의 애니메이션 원칙에 영향을 받은 모션 원칙의 두 UX 중 두번째것이다. 이것은 'Follow_Through_and_Overlapping_Action">Follow Through and Overlapping Action'로부터 온 케이스이다.

실행에서는 비슷하지만 목적과 결과에서는 다른, 그 구현에대해 인지하는것이 중요하다.디즈니의 원칙은 '더 시선을끄는 애니메이션'의 결과가 되는 반면, UI 애니메이션 원칙은 더 사용가능한 경험의 결과가 된다.

이 원칙의 효용은, 인터페이스에서 사용자에게 오브젝트의 자연스러움에대해 뭔가 말함으로서, 성공을위한 사용자를 미리 인지시키는 세팅 작업이다. 위의 참조에서 설명적인것은 위 두 오브젝트가 결합되있고 아래 오브젝트는 분리되있다. 아마도 위 두 오브젝트는 상호소통하지않는 이미지와 텍스트일수 있는 반면 하단의 오브젝트는 버튼일 것이다.

사용자가 이 오브젝트가 무엇인지 인지하기 전이라도, 디자이너는 이미 그에게 오브젝트들이 다소 '분리'되있다고 말해왔다. 이것은 매우 강력하다.


위 예시에서, 플롯팅 액션 버튼(FAB)는 세개의 버튼을 포함한 헤더 네비게이션 엘리먼트로 변형된다. 버튼들이 각기 다른 시간에 '오프셋'되기때문에, 그들의 '분리'를 통해 사용성을 제공하게된다. 다르게 말하면, 디자이너는 시간을 사용하여 (사용자가 오브젝트를 인지하기 전일지라도) 오브젝트들이 분리되있음을 말한다. 이것은 사용자에게 말하는 효과를 가지고, 시각적 디자인으로부터 완전히 독립적이며, 인터페이스에서 오브젝트의 자연스러운 부분이다.

어떻게 하는지 보여주기위해 오프셋&딜레이 원칙을 나눈 예시를 보여주겠다.


위의 예시에서는 정적인 시각적 디자인이 우리에게 백그라운드 넘어에 아이콘들이 있다고 말한다. 아이콘들이 각자 서로 분리되고 서로 다른 일을 한다고 어림짐작할 것이다. 그러나 모션은 이것을 부정한다.

시간적으로는, 아이콘이 줄 단위로 묶여서 마치 한 오브젝트인것처럼 동작한다. 그 타이틀들도 마찬가지로 줄 단위로 묶여있어서 한 오브젝트처럼 동작한다. 이 모션은 사용자이 눈으로 본것과 다른 무언가를 말하고 있다. 이 경우에, 우리는 이 오브젝트의 인터페이스상 시간적 동작은 사용성을 제공하지 ㅇ낳고 있다고 말할 수 있다.

원칙3: 페어렌팅(Parenting)
다수의 오브젝트와 상호소통할때 공간적, 시간적 계층의 관계를 만든다.


페어렌팅은 사용자 인터페이스에서 오브젝트에 '관계'를 부여하는 강력한 원칙이다. 위 예시에서는, 상위 혹은 '자식' 오브젝트의 '스케일'과 '포지션' 프로퍼티는 하위 혹은 '부모' 오브젝트의 '포지션' 프로퍼티에 부모역할을 한다.

페어렌팅은 오브젝트 프로퍼티를 다른 오브젝트 프로퍼티에 연결한다. 이것은 사용성을 제공하는 방법으로 오브젝트 관계와 계층을 만든다.

또한 페어렌팅은 자연스러운 오브젝트 관계를 사용자에게 전달하면서 디자이너가 사용자 인터페이스상의 더 나은 동위의 시간적 이벤트를 만들 수 있게 해준다.

스케일, 투명도, 위치, 로테이션, 모양, 색깔, 값등을 포함한 오브젝트 프로퍼티를 재호출한다. 이런 모든 프로퍼티는 사용자 경험에서 시너지스틱한 순간을 만들기위해 다른 프로프터에 연결될 수 있다.

 



위에서 왼쪽 예시에서, 얼굴 엘리먼트의 'y축' 프로퍼티는 둥근 인디케이터 부모의 'x축' 프로퍼티에 자식역할을 한다. 둥근 인디케이터 엘리먼트는 수평 축을 따라 움직일때, 그 '자식' 엘리먼트는 수평과 수직을 따라 움직인다(마스크(또다른 원칙이다)되고 있지만).

이 결과는 동시에 발생하는 계층적인 시간의 설명적 프레임워크이다. 각각의 숫자에서 '얼굴'이 부분적으로 완전히 보이고 보이지 않는다는 점에서 '얼굴'은 일련의 '잠금 장치(lockup)'로 작동한다는 점을 인지하자. 사용자는 이런 고름을 경험하지만 우리는 이 예시에서 미묘한 '사용성 치트'가 있다고 말할 수 있다.

페어렌팅은 '실시간' 인터렉션으로는 최고의 기능을 한다. 상ㅇ자가 직접 인터페이스 오브젝트를 조작하기 때문에, 디자이너는 모션을통해 사용자에게 소통할 수 있다(어떻게 오브젝트들이 연결되있는지, 그들사이에 어떤 관계가 있는지)

페어렌팅은 3가지 형식으로 나타난다: '직접 페어렌팅(direct parenting)' (위에서 본 두 예시), '지연된 페어렌팅(delayed parenting)'과 '역 페어렌팅(inverse parenting)' (아래에서 보이는 것)

 



원칙 4 : 변형(Transformation)
오브젝트 기능이 바뀔때, 설명적 흐름의 지속적인 상태를 만든다.
 


모션 원칙 '변형'에서 UX에대해 이미 많이 알아보았다. 어떤 면에서는, 가장 명확하고 간파하기 쉬운 애니메이션 원칙이다.

변형은 보면 가장 알기 쉽고, 가장 눈에띄게 보인다. 'submit' 버튼의 모양이 원형의 프로그래스 바로 바뀌고 결국 확인 체크 표시의 모양으로 돌아오는 것은 우리가 인지하는 것이다. 이것은 시선을 잡아주고, 이야기를 말하며, 완료시킨다.


트렌스포메이션이 하는 일은, 다른 UX 상태나 '이다(is)'(이것은 버튼이다, 이것은 원형 프로그래스 바이다, 이것은 체크 표시이다)를 통해 사용자를 균일하게 트렌지션하여 결국 원하는 결과를 만들어낸다(원문: What Transformation does is seamlessly transition the user through the different UX states or ‘is’s’ (as in this is a button, this is a radial progress bar, this is a check mark) which eventually result in a desired outcome). 사용자는 이 기능적인 공간을 통해 최종 목적지로 이끌린다.

변형은 사용자 경험에서 고르게, 연속적인 이벤트로 핵심 순간들을 나누는 효과를 가진다. 이 고름은 더 나은 사용자 인지, 기억, 완수의 결과가 된다.

원칙 5: 값 변경
값 주체가 바뀔때, 동적이고 연속적인 설명적 관계를 만든다.


텍스트 기반 인터페이스 오브젝트(숫자나 글자를 표현하는)는 그 값을 바꿀 수 있다. 이것은 '정의하기 어려운 명확한(elusive obvious)' 개념중 하나이다.

텍스트와 숫자의 변경은 매우 일반적이어서 유용성을 지원할 때 자신의 역할을 평가할 수있는 구별과 엄격함을 제공하지 않으면서도 이를 통과시킨다.

그래서 값이 바뀔대 사용자 경험이 무엇일까? 사용저 경험에서는 모션 원칙에서 12가지 UX가 사용성을 제공하는 기회들이다. 여기 세가지 기회는 데이터 뒤의 현실성에이젠시 개념, 그리고 값 그자체의 동적인 자연스러움을 위해 사용자를 열결시키는 것이다.

아래 사용자 데시보드 예시를 보자.

 


값 기반 인터페이스 오브젝트가 '값 변경' 없이 불러오면 사용자에게 숫자가 정적인 오브젝트라는 것을 전달하게 된다. 이것은 시속 55마일 속도 제한을 표시하는 표지판과 비슷하다.

숫자와 값은 현실에서 일어나는 것들의 표현이다. 현실은 시간, 수입, 게임 스코어, 사업 메트릭스, 건강 추적 등일 수 있다. 모션을 통해 구별해야하는것은 '겂 주체'는 동적이고 값은 동적인 값 설정으로부터 무언가를 반영한다.

이 관계는 시각적인 값으로 구성된 정적 오브젝트로 인해 손실될뿐만 아니라 더 깊은 기회도 잃는다.

모션 기반 값에서 동적 시스템의 표현을 채택했으면, '뉴로피드백'같은 것을 활성화시킨다. 그 데이터의 동적인 자연스러움을 잡고있는 사용자들은 이제 값을 변경할 수 있게 되고 에이전트가 될 수 있게 한다. 값이 정적이면 값 뒤에 현실에 더 적게 연결되고 사용자는 에이전시를 잃는다.

  


값변경 원칙은 실시간 이벤트 비실시간 이벤트 둘 다로 나타날 수 있다. 실시간 이벤트에서는 사용자가 값 변경을 위해 오브젝트와 상호소통한다. 불러올때나 트렌지션같은 비실시간 이벤트에서는 동적인 설명을 반영하기위해 사용자 입력 없이 값을 변경한다.

원칙 6: 마스킹(Masking)
오브젝트나 그룹의 어떤 부분에의해 결정되는 기능이 나타나거나 숨겨질때, 한 인터페이스 오브젝트나 오브젝트 그룹에 연속성을 만든다.


이 마스킹  요청은 오브젝트의 모양간의 관계와 그 기능으로 생각할 수 있다.

디자이너들이 정적 디자인의 문맥에서 '마스킹'에 친숙하기때문에, 시간내 상태로서가 아닌 동작으로서 발생하는 모션 원칙 '마스킹'에서의 UX를 구별하는 것이 필요하다.

오브젝트의 범위를 드러내고 숨기는 시간적 용도를 통해, 기능은 연속적으로 고른 방법으로 트랜지션된다. 또한 설명적 흐름을 보존하는 효과도 가진다.


위 예시는, 헤더 이미지의 바운딩 모양과 포지션을 변경하지만 컨텐트는 변경하지 않은체 앨범이 된다. 마스크로 컨텐트롤 보존하면서, 이것은 그 오브젝트가 무엇인지 변경하는 효과를 가진다(꽤 멋진 기술로). 이것은 트랜지션이라 비실시간으로 일어나고, 사용자 액션을 받고 난 뒤에 활성화된다.

UI 애니메이션 원칙들은 시간적으로 일어나고, 연속성, 설명적, 관계, 예상을통해 사용성을 제공한다는 점을 기억하자. 위 참고자료에서 오브젝트 자체가 바뀌지 않은채로 남아있는 동안, 바운더리와 위치를 가지고 있고, 이 두가지 요인은 이게 어떤 오브젝트인지 결정한다.

원칙 7: 오버레이
층의 오브젝트가 종속된 위치일때, 설명적인 것과 시각적 2차원에서 오브젝트의 공간적 관계를 만든다.


오버레이는 비공간적 계층의 부재를 극복하기위해 사용자에게 2차원의 순서있는 프로퍼티들을 이용하게 함으로서, 사용성을 제공한다.

오버레이는3차원 공간이 아닌 곳에서, 다른 오브젝트보다 뒤나 앞에 있는 위치가 종속된 오브젝트들을 소통하기위해 디자이너들은 모션을 사용할 수 있다.

 


왼쪽의 예시는. 뒷편에 위치한 추가적인 오브젝트를 드러내기위해 앞편의 오브젝트를 오른쪽으로 민다. 오른편의 예시는, 추가적인 컨텐트와 옵션을 드러내기위해 전체 화면을 아래로 민다(각 사진 오브젝트를 소통하기위해 오프셋&딜레이 원칙을 사용하면서).

약간은 디자이너로서 레이어' 방법은 자명할 정도로 매우 명확하다. 우리는 레이어로 디자인하고 레이어 개념은 깊게 내재되있다. 그러나 '만드는것'과 '사용하는것'의 과정은 조심해서 구별해야한다.

계속해서 '만드는' 과정에 끌려가버린 디자이너로서, 우리가 만든 모든 오브젝트 부분들에 충분히 친숙하다. 그러나 사용자로서 눈에 보이지 않는 부분은 시각적으로나 인지적으로 숨겨진 정의와 동작에 의한 것입니다.

오버레이 원칙은 디자이너들에게 'z축' 위치의 레이어 사이에 관계를 통해, 사용자에게 공간적 방향을 개선한다.

원칙 8: 클로닝(Cloning)
새 오브젝트가 시작하고 출발할때, 연속성, 관계, 설명을 만든다.


새 오브젝트가 현재 화면에서 (혹은 현재 오브젝트로부터) 만들어질때, 그 출현에대해 설명적으로 알려주는 것은 중요하다. 이 선언서에서 나는 오브젝트 시작과 출발을위한 설명적 프레임워크를 만드는것이 강력하게 중요하다고 주장한다. 간단하게 투명도 조절은 이런 결과를 달성할 수 없다. 강력한 설명을 만들기위해 마스킹, 클로닝, 차원은 사용성 기반 세가지 접근법이다.

  


위 세가지 예시에서는, 사용자가 이 오브젝트에 집중하고 있는 시간동안 히어로 오브젝트로부터 새 오브젝트를 만든다. 접고 펼치는 위 두가지 예시의 접근법(주의를 잡고, 클론된 새 오브젝트의 생성을 통해 눈을 끈다)은 이벤트를 명확하고 모호하지않게 연결하여 소통하는 강한 효과를 가진다: 액션 'x'는 새 자식 오브젝트의 생성 'y'의 결과를 가진다.


원칙 9: 엄폐(Obscuration)
사용자에게 주요 시각 계층이 아닌 오브젝트나 화면에 관계에서 공간적으로 그 자체를 익숙하게 해준다.


모션 원칙의 마스킹과 비슷한데, 엄폐는 정적 현상과 시간적 현상 둘다에 존재한다.

시간적인 생각을 경험하지 못한 디자이너에게는 혼란스러울 수 있다(이것은 순간 사이의 순간이다). 보통 디자이너들은 화면대 화면을 디자인하거나 작업대 작업을 디자인한다. 엄폐라는것을 엄폐된 상태가 아니라 엄폐되는 동작이라고 생각하자. 정적인 디자인은 엄폐된 상태를 표현한다. 시간을 도입하여 엄폐되고있는 오브젝트의 동작을 만들어준다.

 


위의 두 예시에서, 엄폐를 볼 수 있는데, 투명한 오브젝트나 오버레이처럼 보인다. 또한 시간내 여러 프로퍼티를 포함하는 시간적 인터렉션이다.

여기서의 여러 일반적인 기술에는 블러 효과와 전체 오브젝트 약한 투명성(lessoning of overall object transparency)을 가진다. 사용자는 그가 동작하고있는 곳에 추가적으로 주요하지 않는 문맥을 알게 되었다(그 주요 오브젝트 계층 '뒷편에' 또다른 세계가 있다).

엄폐는 사용자 경험에서 뷰나 '목표 뷰'를 하나로 만들기위해 디자이너들이 보완할 수 있게 해준다.

원칙 10: 페럴랙스(Parallax)
사용자가 스크롤 할때, 시각적 2차원에서 공간적 계층을 만든다.


'페럴랙스'는 모션 원칙에서 한 UX로서 다른 비율로 움직이는 다른 인터페이스 오브젝트를 표현한다.

'페럴랙스'는 디자인 완결을 유지하면서 동시에 사용자를 주요 액션과 컨텐트에 집중하게 해준다. 페럴랙스 이벤트동안 사용자는 뒷편의 엘리먼트들은 뒤로 들어가있는 지각과 인식을 준다. 디자이너는 배경이나 도움을주는 컨텐트로부터 직접적인 컨텐트를 분리해낼 수 있게 페렐랙스를 사용할 수 있다.

 


사용자에게 있는 이 효과는 인터렉션의 지속시간, 다양한 오브젝트 관계를 명확하게 정의하는 것이다, 앞쪽의 오브젝트, 혹은 사용자에게 '가까히' 나타나서 '빠르게' 움직이는 오브젝트이다. 비슷하게, 뒷쪽의 오브젝트, 혹은 '멀리 있다'고 인지되어 '천천히' 움직이는 오브젝트이다.

디자이너는 이런 관계를 만들 수 있는데, 시간 자체를 사용하여 인터페이스에서 어떤 오브젝트가 높은 우선순위를 갖는지 사용자에게 알려준다. 따라서 뒷편에 밀어넣거나 상호소통하지 않는 오브젝트를 더 '뒤로'하여 이해할 수 있다.

시각적 디자인에서 어떤것이 결정되었는지를 넘어, 사용자들이 이제 인터페이스 오브젝트가 계층을 가진다고 인지할 뿐만 아니라, 이 계층은 이제 그 디자인/컨텐트를 의식하기 전에 자연스러운 사용자 경험을 사용자가 가지는데에 이용할 수 있다.

원칙 11: 차원(Diemnsionality)
새 오브젝트가 시작되거나 출발할때, 공간적 설명의 프레임워크를 제공한다.


사용자 경험에 중요한 점은 위치의 이해만큼 연속성의 현상이다.

차원은 2차원의 비논리적 사용자 경험을 극복하는 강력한 방법을 제공한다.

인간은 실제 세상과 디지털 경험 둘다 설명을 위해 공간적 프레임워크 사용에 두드러지게 적응된다. 공간적 시작이나 출발의 레퍼런스를 제공하면 사용자가있는 UX의 정신적 모델을 증진하는데 도움이 된다.

또한 Dimensionality Principle은 깊이가없는 객체가 같은 평면에 존재하지만 다른 객체의 '앞에 또는'뒤에 존재하는 시각적 인 평지의 계층적 역설을 뛰어넘는다.

차원은 세가지 방법으로 표현된다. 오리가미 차원(Origami Dimenstionality), 플롯팅 차원(Floating Dimenstionality), 오브젝트 차원(Object Dimenstionality).

오리가미 차원은 '접는' 혹은 '매딜린' 셈차원 인터페이스 오브젝트의 용어라 생각할 수 있다.

 


여러 오브젝트들이 '오르가미' 구조로 결합되기 때문에, 숨겨진 오브젝트들은 공간적으로 보이지 않더라도 아직 '존재한다'고 말할 수 있다. 이것은 효과적으로 사용자 경험을 랜더링하는데, 인터렉션 모델 자체에서나 인터페이스 오브젝트 그 자체의 시간적 동작에서 둘 다 사용자가 작업의 문맥을 이야기하고 만든다.

플롯팅 차원은 인터페이스 오브젝트에게 공간적 시작/출발을 제공하여, 직관적이고 매우 설명적인 인터렉션 모델을 만든다.


위 예시에서, 차원은 3D '카드' 사용을 통해 달성되었다. 이것은 시각적 디자인을 제공하는 강력한 설명적 프레임워크를 제공한다. 이 설명은 추가적인 컨텐트와 상호활동에 접근하기위해 카드를 '가볍게 튀기면서(flipping)' 연장된다. 차원은 갑작스러움을 최소화하는 방법으로 새 엘리먼트를 소개하는 강력한 방법일 수 있따.

오브젝트 차원은 실제 깊이와 양식으로 차원적인 오브젝트가 된다.

 


여기에는, 실제 공간적인 오브젝트를 형성하기위해 3D 공간에 여러 2D 레이어가 정렬되있다. 그들의 차원은 실시간과 비실시간 트랜지션의 순간에 드러난다. 오브젝트 차원의 이 기능은 사용자가 보이지 않는 공간 위치에 기반한 오브젝트 기능의 예리한 인지를 전개하는 것이다.

원칙 12: 돌리(Dolly)&줌(Zoom)
인터페이스 오브젝트와 공간이 이동할때, 연속성과 공간적 설명을 보존한다.


돌리와 줌은 영화에서의 개념인데, 카메라에 관련된 오브젝트의 이동이나 먼 샷에서 가까운 샷으로(혹은 그 반대도) 부드럽게 변하는 프레임에서 이미지 그자체의 크기와 관련된 오브젝트 이동을 의미한다.

특정 문맥에서, 3D 공간에서 카메라를 향해 이동하거나 3D공간에서 카메라가 오브젝트를 향해 카메라가 이동한다면, 오브젝트가 줌되는지 말하기는 불가능하다(아래 참조를 보자). 아래 세가지 예시는 가능한 시나리오를 설명한다.


'돌리'와 '줌'은 둘 다 연속적인 엘리먼트와 씬상의 변형을 포함함하고 모션 원칙에서 모션을 통해 사용성을 제공한다는 UX의 요구사항을 맞춘다는 점에는 비슷하지만, '돌리'와 '줌'의 인스턴스를 분리해서 다루는것이 적절하다.

  


돌리는 영화 용어인데, 물체를 향해 가거나/멀어지는 카메라 이동에 적용된다(또한 수평적 '추적의' 이동에 적용하는데, 사용성 문맥에는 적게 관련된다).


UX에서 공간적으로, 이 모션은 사용자의 시점에서의 변화이거나 오브젝트가 위치를 변경하면서 남아있는 고정되어있는 시점을 의미한다. 돌리 원칙은 연속성과 설명을 통해 사용성을 제공하고, 인터페이스 오브젝트들과 목적지간의 고른 트랜지션을 한다. 돌리는 차원 원칙과 통합하여 더 공간적인 경험과 더 깊이감의 결과를 만들고, 사용자에게 현재 뷰의 '앞'/'뒤'에 추가적인 영역이나 컨텐트를 알려준다.

줌은 시점이나 오브젝트가 공간적으로 이동하는것이 아닌 곳의 이벤트를 의미하지만, 오브젝트 자체가 스케일되는것이다(혹은 이것의 우리 뷰가 작아져서 확대된 이미지가 된다). 이것은 보는이에게 다른 오브젝트나 화면 안에 추가적인 인터페이스 오브젝트를 알려준다.


 고른 트랜지션(실시간, 비실시간 둘 다)으로 사용성을 제공한다. 돌리&줌 원칙에서 나온 고름은 공간의 정신적 모델을 생성하게될때 꽤 강력하다.



이 긴 것을 완주했다면, 축하한다! 야생의 선언서였다. 모든 gif들이 로딩되서 여러분의 브라우저를 죽이지 않았길 바란다. 또한 여러분 스스로를 위한 어떤 가치와 새로운 도구를 얻었길 바라며 여러분의 인터렉티브 프로젝트에 사용되길 바란다.

사용성을 제공하기위한 디자인 툴로서 어떻게 모션 사용을 시작할 수 있는지에대해 좀 더 배우길 바란다.

다시, 마지막 플러그로, 모션과 사용성에관한 주제에관해 학회나 워크샵에서 야러분의 팀위한 나의 강연을 원한다면, 여기로 가봐라. 여러분의 도시에서 수업에 참석하고 싶으면, 여기로 가보아라. 마지막으로 여러분의 프로젝트에대해 컨설팅을 받고 싶으면, 여기로 가면 된다.내 리스트에 추가되려면 여기로 가면 된다.



이 선언서는 아마존의 Kateryna Sitner의 끊임없는 피드백과 관대하고 인내심있는 기여가 없었다면 가능하지 않았을 것이다. 감사합니다! 브레인스토밍과 I land the plane하는 주장에 Alex Chang, 매의 눈을 가진 마이크로소프트의 Bryan Mamaril, 편집 노트의 Jeremey Hansom, 놀라운 UI 모션 지도자가 된 Eric Braff, 몇년간 나를 믿고 따라온 Artefact의 Rob Girling, 애프터 이펙트 학회에서 UI 모션에대한 영감을 주는 Matt Silverman, 멋진 룸메이트이자 UI에 영감을 주는 Bradley Munkowitz, 모션에서 놀라운 글을 쓰는 Pasquale D’Silva, UI 안무(Choreography)에대한 멋진 글의 Rebecca Ussai Henderson, UI와 모션에관한 주제에 멋진 기여를 하는 Adrian Zumbrunnen, 나의 지능적 형재로 항상 나의 수준을 올려주는 Wayne GreenfieldChristian Brodin, 그리고 영감의 gif들을 만들어내고있는 수천의 UI 애니메이터들에게 특별 감사를 전한다.



이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

으로 보내주시면 됩니다.



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,

안녕하세요. 아이폰 앱 개발자 카나피오입니다. 저는 지난 3년간 아이폰 앱 개발을 하면서 모았던 유용한 링크를 공유합니다. 대부분 실제로 사용하고 있는 링크를 선별했고, 필요 없는 링크는 제외했습니다. 또한 최대한 자료를 무료로 제공받을 수 있는 링크만 뽑아보았습니다. 혹시 좋은 링크가 있다면 댓글에 달아주세요! 서로 공유하면 좋으니까요.


디자인 참고
Dailygood Design
디자인 관련 링크 모음 사이트. 유명한 디자인 사이트를 모아놓은게 아니라 필수적인 디자인 사이트를 모아놓았다. 디자인 사이트를 모아놓은 사이트조차 예쁘다. 나는 즐겨찾기 해놓고 종종 들어간다.

Dribbble
앱이나 웹의 UI를 참고할 수 있는 디자인 웹 커뮤니티 사이트. 내가 가장 애용하는 디자인 참고 사이트이기도 하다. 보통 앱 개발을 시작할 때 이 사이트를 켬으로써 화면 기획을 시작하기도 한다. UX보다는 UI 디자인이 많다. 예쁘다.

Pinterest
영감을 얻기 위한 사이트. 앱, 웹, 제품 등등 온갖 디자인들이 있다. 더 나아가 영감을 얻을 수 있는 다양한 작품들도 있다. 카테고리도 다양하게 있어서 자신의 취향에 맞게 팔로우하여 볼 수 있고 자신이 저작권에 상관없이 자료들을 모을 수도 있다.

Behance
어도비사가 만든 디자인 커뮤니티 사이트. 어도비의 지원을 빵빵하게 받는 만큼 자료가 많다. (근데 웹사이트가 좀 느리다ㅠ)

Vimeo
영상 디자인 참고 사이트. 작품성 있는 영상 자료들이 많이 올라가있다. 유튜브와 비슷하지만 용도는 조금 다르다. 훨씬 질 좋은 영상 자료들이 올라가있고 고품질을 지향한다. 나는 앱개발 영상을 제작할 때 주로 사용하며, 앱개발시 모션 그래픽을 참고하기도 한다.


디자인 리소스
Noun Project
아이콘 모음 사이트. 온갖 아이콘이 많이 있다. 하악하악


개발
Google Play Console
구글 개발자 페이지.

iTunes Connect
애플 개발자 페이지.


통계
App Annie
개발자 계정을 연결하여 자신의 앱(또는 다른 앱)의 실시간(1시간 정도의 시간차가 있습니다.) 순위권이나 다운로드 수, 수익, 사용자 리뷰, 앱스토어 피쳐드 등등의 퍼블리싱 정보를 얻을 수 있다.

구글 어널리틱스
구글에서 제공하는 서비스 분석기. 자신의 앱에 코드를 심어 놓으면 실시간 사용자나 누적 사용자, 활성 사용자 등 다양한 사용자 정보의 통계를 확인 할 수 있다. 화면 전환이나 이벤트 등을 등록해놓고 사용자가 얼만큼의 빈도로 이벤트를 발생시키는지 알 수 있다.


참고
아이콘 메이커
1024*1024 크기의 아이콘을 넣으면 개발에 쓰이는 아이콘 크기별로 뽑아준다. 이게 겁나 편하다. 안드로이드, 아이폰, 아이패드, 애플워치 등등 해당 디바이스의 아이콘을 다 뽑아준다.

iOS 폰트 리스트

애플 앱스토어 리뷰 시간
http://appreviewtimes.com/
애플 앱스토어의 앱 리뷰 대기 시간을 평균 내어주는 사이트.


추가
유용한 사이트 모음
https://github.com/etdot/bookmark
좀 더 다양한 사이트 모음. 



WRITTEN BY
tucan.dev
개인 iOS 개발, tucan9389

,