Blog

#이상한모임 Xcode 스토리보드를 이용한 프로토타이핑 세미나 후기

April 16, 2014

#이상한모임 Xcode 스토리보드를 이용한 프로토타이핑 세미나 후기

Xcode Storyboard를 이용한 목업과 프로토타이핑 세미나를 다녀왔다. 원래 후기는 빨리 쓸수록 좋고, 까먹기 전에 남겨놔야 해서 자기 전에 몇 자 적고 잔다. zzZ

발표는 OSXDev에서도 활동 중인 윤성관(@lingostar)님이 해주셨다. 제목은 목업과 프토로타이핑이지만 목업과 프로토타이핑을 만들기 위해서는 디자인이나 UI 요소에 대한 이해도 필요하기 때문에 HIG를 먼저 다루고 그 이후에 직접 만드신(!) 프로토타이핑 도구를 소개해주셨다.

발표 내용은 OSXDev에서 4월 오픈세미나 때 하셨던 내용과 같았는데 그때 참가 신청만 해놓고 참석하지 못해서 아쉬웠는데 이번 기회에 아쉬움을 없앨 수 있어서 개인적으로 너무 좋았다. 보충수업 감사합니다.

iOS HIG

iOS HIG가 iOS 7이 나오면서 대대적인 업데이트가 되었는데 무려 한국어로 번역을 하셨다! 대단하십니다, 그리고 감사합니다~

아래는 세미나에서 들었던 내용 중에 참고할만한 내용만 간추려서 정리

UI 디자인의 기본

  • 타이틀 스타일의 대문자와 문장 스타일의 대문자 구분 (UIAlertView 사용할 때) / This is Title Style Capitalization & This is sentence style capitalization
  • iOS 7 디자인의 핵심 3가지 : Deference, Clarity, Depth
  • 버튼을 어떻게 구분할 것인가? 타이틀을 동사구로, 키컬러로 보이도록, UI 요소에서 버튼이 있어야 할 위치
  • 앱은 즉각적으로 시작, 설정은 80%에 맞춰서 (디폴트 설정), 설정은 앱 안에서
  • 회원가입은 최대한 늦춰라, 시동 방향에 대한 고려, 종료 위치에서 다시 시작 / EULA는 앱스토어에서 보여줌 (설치 전에)
  • 자주 저장, 종료위치 저장, (백그라운드에 들어갔을 때 종료라고 생각해야 함)
  • 컨트롤(인터렉션 요소)는 최소 44 * 44 (기본 iOS 컨트롤의 기본 사이즈)
  • 모달컨텍스트는 너무 자주 사용하면 안됨, 특히 중첩해서 모달을 쓰면 사용자에게 혼란을 줌
  • 컨텐츠 영역에 컨트롤이 들어가면 이게 컨트롤인지 나타내는 게 좋음 (백그라운드, 적절한 경계 표시)
  • 애니메이션은 일관성이 있어야 하고, 적절히 사용해야 함 (과하거나 혼란을 주면 안됨)
  • 적/녹 색맹을 고려. 포토샵에 적/녹 색맹을 위한 체크 기능이 있음
  • 커스텀 폰트를 사용하는데 적당한지 체크 포인트 6가지가 HIG에 있음
  • 표준 UI 요소들 정확하게 사용 (iOS 버전에 맞는 UI 요소들을 그대로 사용해야 함)
  • 표준 UI 요소와 비슷하지만 다르게 동작하는 커스텀 UI를 만들지 마라

디자인 전략

  • 심미적 완결성, 일관성, 메타포
  • 앱 정의하기 (ADS) -> 커스터마이즈 -> 프토로타입과 반복

iOS 기술들

  • 다양한 기술들이 있다. 많다…
  • 오디오 세션 테이블, 오디오 세션 시나리오 5개 (HIG 참고)

UI 요소들

  • 액티비티 아이콘 만드는 법 (HIG에 있음) – 공유했을 때 나오는 UI에 들어간 아이콘
  • Alert은 되도록 쓰지 말고, 보인다면 부정적으로 말하는 것을 망설이지 말라
  • 두 버튼 이상 Alert은 되도록 액션시트를 써라, Alert은 되도록x3 쓰지 말 것!
  • 액션시트에는 스크롤이 되지 않도록 (버튼이 눌리는 경우가 많다…)

아이콘과 이미지 디자인

  • 앱 아이콘은 유니버셜하게
  • iOS 7부터 런치 이미지는 되도록 쓰지 마라
  • 런치 이미지는 사용자의 체감 속도를 위해, 컨텐츠를 미리 띄우면 살짝 빨라 보인다

Prototype with PP(PilotPlant)

Flinto, Fluid와 같이 이미지로 프로토타이핑을 만드는 도구들은 UI에 대한 이해 없이 이상하게(?) 동작하는 프로토타이핑을 만들어낼 수 있다. (단점) / Origami와 같은 도구는 조금 더 강력하지만 어렵고 사용층이 많지 않다.

스토리보드는 그 자체로 훌륭한 프로토타입 도구 (PilotPlant의 시작 포인트)

PilotPlant는 스토리보드로 다양한 뷰 컨트롤러를 쉽게 만들 수 있게 한 래퍼 뷰 컨트롤러 모음 / Xcode를 다룰 줄 알고 스토리보드에 대한 이해가 조금 있는 기획자 (또는 개발자와 함께) 프토로타입을 만들 수 있는 도구

소감 & 정리

짧은 시간에 많은 분량의 내용을 함축적으로 들은 느낌이었다. HIG 요약 및 번역하신 링크 공유는 확실히 많은 도움이 되었다. HIG는 iOS 개발에 있어서 교과서이고 정석과도 같은 문서이며 매우 중요하다. 하지만 다 지키지는 않는다. 일단 우리 앱만 봐도 그렇고, N사의 경우에는 HIG는 무시하고 만드는 경우도 많다. 그래도 iOS 7으로 넘어오면서 iOS 자체 디자인 컨셉이 바꾸고 HIG는 다시 한 번 중요해졌다. 놓치고 있던 부분들은 지금이라도 다듬어야겠다.

(어떻게 보면 개발자의 영역인) 스토리보드를 가지고 프로토타입 도구를 만드신 것 자체는 정말 신선하고 흥미로웠다. 하지만 참여하신 기획자분들의 의견을 듣거나 진입장벽을 생각하면 국내에서는 노력에 비해서 큰 빛을 보지 못할 가능성이 커 보였다. 조금 더 다듬고 iOS 점유율이 그나마 높은 외국을 타겟으로 한다면 Origami 정도는 아니어도 그에 견주는 프로토타입 도구가 될 수도 있을 것 같다. 일단 OS X 환경이 어느 정도 갖춰지고 스토리보드를 쓸 수 있을 정도의 능력이 필요하므로 기존의 기획자 입장에서는 또 다른 넘사벽으로 느껴질 수 있을 것 같다는 생각이다. 하지만 이런 시도 자체가 중요한 것이다. 결국, 기획자와 개발자 사이의 커뮤니케이션에 대한 고민의 결과물이기 때문이다.


정말 마지막으로 “개발자의 욕심은 끝이 없고, 할 짬은 안 난다. 끝나지 않는 할 일만이 있을 뿐…”, 긍정적으로 마무리 하자면 “배운 걸 써먹자”