WWDC 2017 &ย Fall
Design
๐ App Icon Design
- Metaphor
- Simplicity
- Connection
- Linearge ( Mac, iPhone ์ฉ Keynote icon ์ด ์ข์ ์)
- Unique
- Experiment
- Test (ํด๋ ์ํ์์ ํ์ธํด ๋ณด๋ ๊ฒ์ด ์ธ์ ์ ์.)
- Patience
๐ Love at First Launch
- Lead with great content (์ฒซ ํ์ด์ง ๋ถํฐ LogIn ์ฐฝ ๋์ฐ์ง ๋ง์.)
- Teach through interaction (ToolTip ๊ฐ์ ๊ฑฐ ์ฌ์ฉํ์ง ๋ง์. ์ข์ ์: Lala craft)
- Delay requests for more dataย
(Device Permission ๊ฐ์ ๊ฑฐ๋ ๊ทธ๋ ๊ทธ๋ ์์ฒญ. ๋ฏธ๋ฆฌ ์์ฒญ ํ์ง ๋ง์)
๐ Designing for a Global Audience
- Gestures
- Localized vs globalizedย
(ex. ์ผ๋ณธ์์ ์ฐ๋ ์ฐํธ Icon VS ์ธ๊ณ์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ฐํธ Icon) - Specific vs universal
- Associations
- Itโs not all or nothing
- Use resources available (Googling)
- Make a great user experience
- Plan for expansion
- Idea ๐ก๊ฐ ์์ผ๋ฉด Prototype ์ ๋ง๋ค์ด์ ์ฌ๋๋ค์๊ฒ ๋ณด์ฌ์ค๋ผ!ย
๋์์ด๋, ๊ฐ๋ฐ์ ๋ฑ ์ง๊ตฐ์ ์๊ด์์ด Prototype์ ๋๊ตฌ๋ ๋ง๋ค ์ ์๋ค.!!! Keynote๋ก๋ ์ถฉ๋ถํ ๋ง๋ ๋ค. - Make (keynote ์ถ์ฒ) โ Show (์ฌ๋๋ค์๊ฒ ๋ณด์ฌ์ค๋ผ. ๋ง๋ง ํ์ง ๋ง๊ณ . ๋ณด์ฌ์ฃผ๊ณ ํผ๋๋ฐฑ!)โ Learn (๊ฐ์ ํ๊ธฐ)
๐ Express YourSelf!
- iMessage์ ๊ดํ ์ด์ผ๊ธฐ. iMessage๋ฅผ ์ ํ์ฉํ๊ธฐ ์ํ Tip 3
- Convenient (App์์ ๊ผญ ํ์ํ ๋ถ๋ถ๋ง ์ ๊ณตํ๊ธฐ)
- Personal (Wish list ์ฒ๋ผ, ๊ฐ์ธํ๋ ์ ๋ณด๋ฅผ ์ ๊ณต)
- Fun (Sticker, Animation ๋ฑ ์ ๊ณตํ๊ธฐ)
๐ Designing for Subscription Success
- Subscription ๋งค์ถ์ ์ฌ๋ฆฌ๊ธฐ ์ํ Tip๋ค
- Free trial (Apple Music ์ฒ๋ผ 3๊ฐ์ ๋ฌด๋ฃ. ์ค๊ฒฐ์ ์ ํ์จ์ด ๋์.)
- Premium feature
- Sample content
๐ Designing Glyphs
- Glyph์ ๋์์ธ ํ ๋ ๊ณ ๋ คํด์ผํ Tip 3๊ฐ์ง.
- Simplified form
- Universal symbology
- Quickly readable in context
- Quick Action, Mac์ menu icon๋ค ๋ง์ ์์ ๋ค์ด ์๋ค.
๐ Designing Get Started with Display P3
- ์ฌ์ง ์ฌ์ฉํ๋ App์์๋ P3 color profile์ ์ด์ฉํ ํ์๊ฐ ์๋ค.
- iPhone 7 ๋ถํฐ ์ง์ํ๋ฏ๋ก ์ด๋ฏธ ๋ง์ ์ฌ์ฉ์๋ค์ด P3๋ฅผ ์ด์ฉํ๋ค.
- Photoshop์ผ๋ก color profile ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ ์ค๋ช
๐ Rich Notifications
- ์์ง ์ ๋ณด๋ง ๋ณด๋ด๋ผ. ์ธ๋ฐ์๋ ์ ๋ณด ๋ณด๋ด๊ธฐ ์์ํ๋ฉด User๋ Notification์ ์ฐจ๋จํ๋ค. Emily Parktroy

๐ Size Classes and Core Components
- Size classes (Compact, Regular)
- Dynamic Type (Custom font๋ Headline, Body, Title ๊ฐ์ด table ์ ์ํด์ ์ฌ์ฉํ๋๋ก ์ง์, CustomFont ์ฌ์ฉํ ๋, Font height์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ์ฃผ์! )
- UIKit Elements (Apple UI Design Resources ์ฐธ๊ณ )
๐ Communication Between Designers and Engineers
- Same Terminology (์ฉ์ด ํต์ผ)
- One source (Wiki, Email, Google Drive.. ํ ๊ณณ์ Assets๋ค ์ ๋ฆฌํด๋ผ)
- Focus (ํฐ ๊ณณ์์ โ ์๊ฒ ์ง์ค)
- Show > Tell (๋ง๋ก ํ์ง ๋ง๊ณ ์๊ฐ์ ์ผ๋ก ๋ณด์ฌ์ค๋ผ)
๐ Designing Sound
- ๋์์ธ์ ๋ํ ์๋ก์ด ์๊ฐ์ ๋ณด์ฌ์ค ๐
- ์๊ฐ์ ๋์์ธ ๋ง๊ณ ์๋ฆฌ๋ ์ฌ๋๋ค์๊ฒ ์ ๋ณด ์ ๋ฌ ๊ฐ๋ฅ.ย
(Message ์๋ฆผ, Push ์๋ฆผ, ์๋์ฐจ ์์ ๋ฒจํธ ๋ธ๊น, ๊ธฐํ ๋ฑ๋ฑ ์๋ฆฌ๋ง์ผ๋ก๋ ์ ๋ณด ์ ๋ฌ์ด ๊ฐ๋ฅ) - ์๋ฆฌ๋ง์ผ๋ก Brand ํ ์ํฌ ์ ์์. (Logo ๋์ฐ๋ฉด์ ํน์ ์๋ฆฌ ๋ค๋ ค์ฃผ๊ธฐ)
- ๊ฐ๊ฒฐํ๊ฒ ์๋ฆฌ๋ฅผ ๋์์ธ ํด๋ผ.
- iPhone speaker๋ ์ ์ฃผํ ์ ์ ๋ฌ๋ ฅ์ด ๋จ์ด์ง๋ค. ๋ชจ๋ ๊ธฐ๊ธฐ์์ ๋ค์ด๋ด๋ผ.
โญ๏ธ ๐ Design For Everyone ๐ โญ๏ธ
7๋ช
์ค 1๋ช
์ ์ฅ์ ๊ฐ ์์ (์ธ๊ณ ๊ธฐ์ค).ย
6๋ช
์ค 1๋ช
์ ๋ฐ๋ฌ ์ฅ์ ๋ฅผ ๊ฐ์ง (๋ฏธ๊ตญ ๊ธฐ์ค)
2์ต 8์ฒ 5๋ฐฑ๋ง์ด ์๊ฐ์ฅ์ ๊ฐ ์์. (์ธ๊ณ ๊ธฐ์ค)
12๋ช
์ค 1๋ช
์ ์๋งน์ (๋จ์ฑ๊ธฐ์ค)
3์ต 6์ฒ๋ง๋ช
์ด ์ฒญ๊ฐ์ฅ์ ๋ฅผ ๊ฐ์ง (์ธ๊ณ ๊ธฐ์ค)
- Simplicity
- Easy to navigateย
(์๊ฐ ์ฅ์ ์ธ๋ค์ด ์ฌ์ฉํ ๋ ์์ฑ๋ง์ผ๋ก ์ฌ์ฉํ๋๋ฐ ๋ฉ๋ด ๋ณต์ํ๋ฉด ์ฌ์ฉํ๊ธฐ ํ๋ค๋ค)
ย
- Quick to get started
ย (App ์์ํ ๋, ๋ก๊ทธ์ธ ๊ธฐํ ๋ฑ๋ฑ ์๊ตฌํ๋ฉด ์ฌ์ฉํ๊ธฐ ํ๋ค๋ค)
ย
- Consistent behavior
ย (์ฅ์ ๊ฐ ์๋ ์ํฉ์์๋ ๋ ์ค์) - Perceivability
โโโMaximize legibility
ย (๋ ๋์ ์ฌ๋๋ค์ ์ํด Font Size ์กฐ์ ๊ฐ๋ฅํ๊ฒ ๊ฐ๋ฐ, Mac ์ค์ ๋ฉ๋ด, News๋ฑ Dynamic font๋ฅผ ์ง์)
ย
โโโAudible cues
ย (์๋ฆฌ ํตํด์ ์ฌ์ฉ์์๊ฒ ์ฌ๋ฌ ์ ๋ณด๋ฅผ ์ ๊ณต)
ย
โโโHaptic feedback
ย (์ด๋ค Event๊ฐ ๋ฐ์ํ ๋ Haptic ์ผ๋ก ๋ฌผ๋ฆฌ์ ์ธ ์๋ฆผ์ ์ ๋ฌ) - Integrity
โโโTake responsibility
ย (Apple์ด ๋จผ์ AppStore, Apple Music, Maps ๋ฑ ์ฅ์ ์ธ ๋ค์ ์ํ Design์ ์ ๊ณตํ๊ธฐ ์์)
ย
โโโBe empathetic
ย (๊ทธ ์ฌ๋ ์ ์ฅ์์ ๊ณต๊ฐํด ๋ด๋ผ)
ย
โโโUnlock potential
๐ Design Tips For Great Games
- Launch (์ฒซ ์ธ์์ด ์ค์ํ๋ฏ, ์ฒซํ๋ฉด์ด ์ค์)
- Loading (์ง๋ฃจํ๊ฒ ๋บ๋บ์ด ๋๋ฆฌ์ง ๋ง๊ณ Animation์ ๋ณด์ฌ์ฃผ๋ ์ง, Tip์ ๋ณด์ฌ์ค๋ผ. ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ์ ์ข์ ์๊ฐ์ด๋ค)
- Quick Start (Play ๊น์ง Depth ๋ง๋ค์ง ๋ง๊ณ , ๋ฐ๋ก ์์ํ ์ ์๊ฒ ํด๋ผ.)
- Interfaceย
- Simple is ๐
- ๋ฒํผ ์ํ ํ์ (Enabled, Disabled, Selected)
- UI๋ ํผ๋ ์ฃผ๋ฉด ์๋จ!!! ๋ช ํํด์ผ ํด! - Basics (Tutorial ์์ ๋ชจ๋ ๊ธฐ๋ฅ ์ค๋ช ํ๋ ค ํ์ง๋ง. ํ๋ค์ดโฆ ๋ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ๋์ค์ ์ฒ์ฒํ ํด!)
- Direction (์ฌ์ฉ์ ๋ฌด์ํ์ง ๋ง. ์ฌ์ง์ด ์ด๋ฉ๋ค์ด ์ฐ๋ฆฌ๋ณด๋ค ๋ ๋๋ํด. ์กฐ์๋ฒ ๋ค ์๋๊น ๋๋ฌด ์์ธํ๊ฒ ์ค๋ช ํ์ง ๋ง!)
- Inventive (์๋ก์ด ์กฐ์์ ๋ํด์๋ง ์ค๋ช . ์ง๊ด์ ์ผ๋ก ์ ์ ์๋ ๋์์ ๋ํ ์ค๋ช ํ์ ์์)
- Play (Play ํ๋ฉด์ ์กฐ์๋ฒ ์ ์ ์๋๋ก ํ๋ฉด ์ข์. Guide, Tutorial ์์ด ๋ฐ๋ก ์๋ฉด ๐)
- Skip (๊ฒ์ ์์ํ ๋, Skip ์ ๊ณตํด๋ผ. ๋ค์ํ ์ฌ์ฉ์๋ค์ด ์๋๋ฐ ๋ชจ๋๋ค ์์(Guide ๋ฑ) ๋ณด์ฌ์ค ํ์ ์๋ค. )
- Include
๐ How to Pick a Custom Font
- Functionality (Font Structure, Contrast ์ค๋ช )
- Style (๋ด์ฉ์ ๋ฐ๋ผ ์ ์คํ Font ์ ํ, ์ ๋ฌธ Headline, ํ๊ธฐ์ฒด ๋ฑ๋ฑ)
- Pairing (Font Size๋ ๊ฐ์๋ ์ค์ ํฌ๊ธฐ๋ ๋ค๋ฅด๋ค. Body ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ)

๐ Writing Greate Alerts
Keep it simple and helpful, Practice: revise your alerts to incorporate these guidelines, Read the HIG
- Do
- Correct errors (ex. LogIn ์คํจ. )
- Request access to user data (ex. ์์น ์ ๋ณด ์์ง)
- Notify users about critical updates (ex. ๊ฐ์ ) - Do Not
โโโDonโt use nonessential or lengthy content (๋๋ฌด ๊ธธ๊ฒ ์ค๋ช ํ์ง ๋ง์๋ผ, Network error message๋ฅผ ํต์ผ๋ก ๋ค ๋ณด์ฌ์ค.)
โโโDonโt offer complicated choices (Action ๋ฒํผ์ด ์ฌ๋ ค ๊ฐ๋ฉด ์ต์ .. Yes, No, Cancle, etc)
โโโDonโt duplicate the tasks of other UI elements (๋ฐ๋ณตํด์ ๋๊ฐ์ ๋ด์ฉ ๊ธ์ง, UI ์ค๊ฐ์ ๊ฐ๋ฆฌ์ง ๋ง๊ธฐ) - Common Problems

๐ Designing Across Platform
ย 1. Select โ 2. Adapt. โ 3. Conform โ 4 Connect โ 5. Extend
- Select
โโโiPhone Context
ย [Alaways on, always with you, Mobile, Personal and private, Short engagement]
ย
- iPhone Capabilities
[Background processes, Environments aware, Touch ID, Touch screen]
ย
โโโApple Watch, iPad, iMac, Apple TV ๋ชจ๋ Context, Capabilities ๊ฐ ์์

- Adapt
โโโPrioritize based on Context and Capabilities. Consider features based on unique capabilities
โโโiPhone ์์๋ ์ด๋ ๊ธฐ๋ฅ๊น์ง ์ง์. Apple Watch์์ ์ด๋ ๊ธฐ๋ฅ์ ์ง์ํ ๊ฑด์ง ๋ฒ์๋ฅผ ์ ํจ - Conform
โโโConsistent โ Identical. (DO NOT Copy & Paste)
โโโBe empathetic (๊ทธ ์ฌ๋ ์ ์ฅ์์ ๊ณต๊ฐํด ๋ด๋ผ)
โโโUnlock potential - Connect
โโโConsistent โ Identical. (DO NOT Copy & Paste)

- Extend
- iMac ๋ก๊ทธ์ธ ํ ๋, Apple Watch๋ก ์๋ ๋ก๊ทธ์ธ ๊ฐ๋ฅ
โโโiMac์์ ์ผํํ ๋ Apple Pay ์ธ์ฆ์ iPhone ๋๋ Apple Watch ๋ก ์ฌ์ฉํจ.
- Wayfinding (์ฌ๋๋ค์ด ์ฝ๊ฒ ์ฐพ์ ๋ค๋ ์ ์๋๋ก Title ํฌ๊ฒ)

- Typographic Hierarchy

- Contrast

โญ๏ธ Design Principles
Apple์ User Interface๊ฐ ์๋๋ผ Human Interface๋ผ๋ ๋จ์ด๋ฅผ ์ฌ์ฉํจ. ์ข๋ ์ธ๊ฐ์ ์ด๊ณ ์นํ์ ์ธ Interface๋ฅผ 70๋
๋ ๋ถํฐ ๊ณ์ Guide.
โ๏ธ Wayfinding (๊ณตํญ ๊ฐ๋ค๊ณ ์๊ฐํด๋ณด์)
- โWhere am I?โ โ Where can I go?โ โ What will I find when I get there?โ โ Whatโs nearby?โ โHow do I get out?โ (๋์์ธ ํ ๋ ๋์ ธ์ผํ ์ง๋ฌธ๋ค)
- ๊ณตํญ ๊ฐ ๋ ๋๋ก์ ํ์งํ ๋ฑ์ ๋ณด๊ณ ์ด๋๋ก ๊ฐ์ง ์ ์ ์๋ค

๐ (์ผ์์ํ์์ ์๋์ฐจ๋ฅผ ์ด์ ํ๋ค๊ณ ์์ํด๋ณด์)
โโโFeedback


- Visibility (Visibility improves usability, Visibility has its limits)

- Consistency (์๋์ฐจ ํจ๋ฌ์ ์ผ๋ฐ์ ์ผ๋ก ์ค๋ฅธ์ชฝ์ด ๊ฐ์, ์ผ์ชฝ์ด ๋ธ๋ ์ดํฌ! ๊ทผ๋ฐ ํต์ผ์ฑ์ด ์์ด๋ด. ์ผ๋ง๋ ํผ๋์ค๋ฌ์ธ๊น? )

๐จ (์ฒ์๊ฐ๋ ํธํ
์ ์ด์ฉํ๋ค๊ณ ์์ํด๋ณด์)
โโโMental Model (์ฌ๋๋ค์ด ์๊ฐํ๋ ์ผ๋ฐ์ ์ธ Model ์ด ์๋ค.)

- Proximity (์ฐ๊ด๋ ๋ฒํผ๋ค์ ๊ทผ์ฒ์ ๋ฐฐ์นํด๋ผ)

- Grouping

- Mapping

๐ (ํ๋ฒ๊ฑฐ ๋จน๋๋ค๊ณ ์๊ฐํด ๋ณด์)
- Affordance

- Progressive Disclosure

- 80/20

ย ํ์ํ ์ ๋ณด๋ง ๋ณด์ฌ์ฃผ๊ณ ! ๋๋จธ์ง ์ ๋ณด๋ ๋๋ณด๊ธฐ ์์ผ๋ก ๋ฃ์. ๋จ๊ณ์ ์ผ๋กย ๋ณด์ฌ์ค๋ผ
๐ (๋ฐ๋ท์ ๋ฌผ๊ณ ๊ธฐ๋ค์ ๋ด๋ ๋์นญ์ ์ผ๋ก ์๊ธด ๊ฒ๋ค์ด ๋ง์)
โโโSymmetry

(์ฐ๋ฆฌ์ ์ฃผ๋ณ ๊ฒ๋ค๊ณผ ๋น์ทํ๊ฒ ๋์์ธํด์ผ ๋ ์ฝ๊ฒ ๋ค๊ฐ์จ๋ค๋ ๋๋)
ย ์ค๋ฅธ์ชฝ ์ฐจ๋ ์ฌ์ง ์์ย ๊ฒ์.

- 3x Image ์ฌ์ฉ
- Safe Area ๊ฐ๋ ์ฌ์ฉ. โ ๊ธฐ์กด์๋ Pin ๊ณ ์ ๋ฐฉ์์ ์ฌ์ฉํ๋๋ฐ iOS 11๋ถํฐ ์๋ก์ด ๋ฐฉ๋ฒ์ผ๋ก ๋ณ๊ฒฝ. (Layout margin ๊ฐ๋ ์ ๊ทธ๋๋ก)
- Round ๋ถ๋ถ ์ฃผ์
- LandScape์์ left, right lendScape์ ๋ฐ๋ผ UI๊ฐ ๋ค๋ฅด๊ฒ ๋ณด์ผ ์ ์๋ค. ์ฃผ์
- Ratio ์ฃผ์ (Clipping ๋๋ ์์ญ์ด ๋ฌ๋ผ์ง) https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c