Climacons by Adam Whitcroft
Category Archives: EDA STUDY
2013년 1월 11일
by gdkim
0 comments
2013년 1월 4일
by 강명수
0 comments
<2011세계피겨선수권대회 콘텐츠 모바일 아이콘> |
이 그림, 혹시 기억나시나요? ^^ 지난 4월, 모바일에서 세계피겨선수권대회 관련 콘텐츠를 보실 수 있도록 연결해 주던 모바일 아이콘입니다. 모바일 화면에서 가로•세로 각각1cm인 모바일 아이콘을 확대시켜 본 그림인데요. 가죽질감이 느껴지는 스케이트화에서는 한 땀 한 땀 바느질선이 보입니다. 얼음판에는 거울에 비친 것처럼 스케이트 날이 고스란히 비쳐 그림자를 만들고 있네요. 실제 모바일 화면에서 보여진 아이콘을 확대해 보면 이렇습니다.
<확대해서 본 모바일 아이콘>
|
무심코 지나치기 쉽지만 1cm 작은 정사각형 안에 서비스의 정체성을 가장 쉽고 명확하게 담아 내야 하는 것이 모바일 아이콘의 사명(^^)인데요. 네이버 모바일 아이콘이 만들어지는 과정을 소개해드립니다.
모바일 아이콘이 만들어지는 과정
모바일 아이콘이 만들어지는 첫 단계입니다. 컴퓨터 그래픽으로 뚝딱 만들어지는 것이 아닐까 생각하시는 분들도 있는데요. 이렇게 연필로 아이디어 스케치를 하는 아날로그적인 과정이 있습니다.
<모바일 아이콘 스케치 과정> |
아이콘의 주제가 되는 오브젝트(object) 샘플을 스케치한 다음에는 이미지에 맞는 색깔을 입혀 테스트 하는 과정을 거칩니다.
<모바일 아이콘 스케치 후 채색 과정>
<TV아이콘, 증권아이콘, 날씨 아이콘 시안>
같은 모양의 디자인이라도 가로•세로 크기를 다르게 해 봅니다. 혹은 사물을 바라보는 시선의 높이나 각도를 달리 해 보기도 합니다.
<각도와 크기를 달리한 시안들> |
다음 단계는 앱과 모바일웹 아이콘 디자인 별로 박스 보더(board)에 얹어서 테스트 하는 과정입니다. 애플리케이션 아이콘은 네이버를 상징하는 그린컬러 보드와 매칭을 시켰고, 모바일웹 아이콘은 깔끔한 화이트 보드와 매칭했는데요. 배경이 되는 박스보더와 아이콘 색이 유사할 경우, 아이콘 주제 오브젝트가 부각되지 않는다는 단점이 발견되었습니다. 아래 녹색 우산으로 표현한 날씨 아이콘이 녹색보더 위에서 전혀 눈에 띄지 않는 것처럼요.
<박스보더에 얹은 아이콘 시안들> |
결론은, 아이콘을 박스보더에서 내리는 것이었습니다. 아이콘 주제 오브젝트의 크기를 박스보더만큼 키워서 그 것 자체로 하나의 아이콘이 되게 하는 방법인데요. 네이버 모바일 아이콘들을 잘 살펴보시면, 배경이 있는 것보다 주제 오브젝트가 하나의 아이콘으로 디자인 되어 있습니다.
<오브젝트 자체가 아이콘 된 네이버 모바일 아이콘>
재료의 질감이 느껴지는 섬세한 표현
네이버 모바일 아이콘은 입체감이 살아 있다는 특징이 있습니다. 앞에서 피겨선수권대회 바로가기 모바일 아이콘을 확대해서 보여드렸는데요. 이외에도 재료의 질감까지 그리고 세밀한 눈금까지 실물 그대로 섬세하게 표현한 아이콘들이 있습니다. 한 땀~한 땀~ 이태리 장인 정신으로 만든 아이콘! 어떤 비밀이 숨어 있는지 한 번 확대해 볼까요? ^^
가계부 아이콘입니다. 가죽표지의 질감이 느껴지시죠? 오목하게 홈을 파서 입체감을 살린 돼지 저금통도 인상적입니다.
<확대한 네이버 모바일 가계부 아이콘>
날씨 아이콘입니다. 실제 온도계와 똑같이 눈금이 그려져 있습니다.
<확대한 네이버 모바일 날씨 아이콘>
캘린더 아이콘 인데요. 묶음 부분의 가죽질감은 가계부 아이콘에서도 보실 수 있었던 거고요. 달력이 찢겨나간 흔적… 찾으셨나요? 촘촘하고 섬세한 표현의 종결입니다. ^^
<확대한 네이버 모바일 캘린더 아이콘>
열 여섯 개의 시안과 스무 개가 넘는 사이즈 작업
가로•세로 1cm 작은 사각형 아이콘 하나가 완성되기까지 참 많은 단계와 고민의 과정들이 반복되는데요. 부동산 아이콘이 완성되는 과정에도 그 모든 것들이 고스란히 녹아 있습니다.
아이디어를 수집하고 스케치하는 단계입니다.
<네이버 모바일 부동산 아이콘 아이디어 스케치 과정>
건물 모양과 지붕의 색, 그리고 네이버 로고의 위치, 나무와 펜스의 모양까지 고려해 16개가 넘는 디자인 시안이 만들어졌습니다. 눈치 채셨는지 모르겠지만, 나무에는 그림자까지 포함되어 있습니다. ^^;
<네이버 모바일 부동산 아이콘 시안들>
디자인이 결정되었다고 모든 과정이 끝난 것은 아닙니다. 다양한 스마트폰과 태블릿 PC 단말기 기종에 따라 아이콘의 크기를 달리해서 배포하게 됩니다.
<다양한 크기로 제작된 네이버 모바일 부동산 아이콘>
디자이너 개인적으로는 프로야구중계 아이콘을 만드는 과정이 즐거웠습니다. 야구를 좋아해서 그런지 애착이 간다고 할까요? ‘한 눈에 야구중계로 연결될 것을 예상할 수 있는 재치 있는 아이콘’이라는 어느 이용자의 격려 때문이기도 합니다. ^^
<네이버 모바일 야구중계 아이콘이 만들어진 과정>
야구중계 아이콘은 스포츠 아이콘과 이질적이지 않으면서 야구중계만의 특징을 살려야 하는 과제가
있었는데요. 여러 가지 아이디어와 시안을 거쳐서 완성이 되었습니다. 물론 확대해 보면, 파릇파릇
한 잔디에서 풀냄새가 날 것 같이 섬세한 그림입니다. 야구공의 한 땀~ 한 땀~도 짐작이 가시죠? ^^
<네이버 모바일 야구중계 아이콘>
확대된 아이콘을 보시고 어차피 잘 보이지 않는 부분인데 그렇게까지 자세하게 작업하는 것이 무슨 의미가 있냐고, 의문을 가지시는 분들도 계실 것 같습니다. 물론 요즘 스마트 폰이나 태블릿 PC 기기가 날로 발전하고 있기 때문에 고해상도의 이미지가 필요하다는 실질적인 이유가 가장 먼저입니다. 그리고 한 가지 더해지기를 바라는 것은…’마음’입니다.
네이버에서 하나의 서비스가 만들어지기까지는 기획과 개발과 디자인과 운영 등… 단어조차 생소한 분야의 많은 손길을 거쳐야 합니다. (저도 입사 이후에 알고 놀랐습니다. ^^;) 그렇게 보이지는 않지만 숨은 노력과 땀이 1cm 정사각형 뒤에 녹아 있었습니다. 작고 잘 보이지 않는 부분이라도 서비스의 얼굴일 수 있다는 마음으로 잘, 그리고 정성껏 만들어 보자는 ‘마음’을 숨겨 놓았습니다.
이제 보이시나요? ^^
2012년 12월 21일
by gdkim
0 comments
2012년 10월 22일
by 김성용
0 comments
http://developer.android.com/distribute/googleplay/quality/tablet.html
누군가 해석을 해주면 참 좋을텐데…
Tablet App Quality Checklist
CHECKLIST
- 1. Test for Core App Quality
- 2. Optimize your layouts
- 3. Use the extra screen area
- 4. Use assets designed for tablets
- 5. Adjust fonts and touch targets
- 6. Adjust homescreen widgets
- 7. Offer the app’s full feature set
- 8. Don’t require hardware features
- 9. Declare tablet screen support
- 10. Follow best practices for publishing in Google Play
TESTING
Before you publish an app on Google Play, it’s important to make sure that the app meets the basic expectations of tablet users through compelling features and an intuitive, well-designed UI.
Tablets are a growing part of the Android installed base that offers new opportunities for user engagement and monetization. If your app is targeting tablet users, this document helps you focus on key aspects of quality, feature set, and UI that can have a significant impact on the app’s success. Each focus area is given as checklist item, with each one comprising several smaller tasks or best practices.
Although the checklist tasks below are numbered for convenience, you can handle them in any order and address them to the extent that you feel is right for your app. In the interest of delivering the best possible product to your customers, follow the checklist recommendations to the greatest extent possible.
As you move through the checklist, you’ll find links to support resources that can help you address the topics raised in each task.
1. Test for Core App Quality
The first step in delivering a great tablet app experience is making sure that it meets the core app quality criteria for all of the devices and form factors that the app is targeting. For complete information, see the Core App Quality Checklist.
To assess the quality of your app on tablets — both for core app quality and tablet app quality — you need to set up a suitable hardware or emulator environment for testing. For more information, see Setting Up a Test Environment.
Related resources:
|
2. Optimize your layouts for larger screens
Android makes it easy to develop an app that runs well on a wide range of device screen sizes and form factors. This broad compatibility works in your favor, since it helps you design a single app that you can distribute widely to all of your targeted devices. However, to give your users the best possible experience on each screen configuration — in particular on tablets — you need to optimize your layouts and other UI components for each targeted screen configuration. On tablets, optimizing your UI lets you take full advantage of the additional screen available, such as to offer new features, present new content, or enhance the experience in other ways to deepen user engagement.
If you developed your app for handsets and now want to distribute it to tablets, you can start by making minor adjustments to your layouts, fonts, and spacing. In some cases — such as for 7-inch tablets or for a game with large canvas — these adjustments may be all you need to make your app look great. In other cases, such as for larger tablets, you can redesign parts of your UI to replace “stretched UI” with an efficient multipane UI, easier navigation, and additional content.
Here are some suggestions:
- Provide custom layouts as needed for
large
andxlarge
screens. You can also provide layouts that are loaded based on the screen’s shortest dimension or the minimum available width and height. - At a minimum, customize dimensions such as font sizes, margins, spacing for larger screens, to improve use of space and content legibility.
- Adjust positioning of UI controls so that they are easily accessible to users when holding a tablet, such as toward the sides when in landscape orientation.
- Padding of UI elements should normally be larger on tablets than on handsets. A 48dp rhythm (and a 16dp grid) is recommended.
- Adequately pad text content so that it is not aligned directly along screen edges. Use a minimum
16dp
padding around content near screen edges.
In particular, make sure that your layouts do not appear “stretched” across the screen:
- Lines of text should not be excessively long — optimize for a maximum 100 characters per line, with best results between 50 and 75.
- ListViews and menus should not use the full screen width.
- Use padding to manage the widths of onscreen elements or switch to a multi-pane UI for tablets (see next section).
Related resources:
|
3. Take advantage of extra screen area available on tablets
Tablet screens provide significantly more screen real estate to your app, especially when in landscape orientation. In particular, 10-inch tablets offer a greatly expanded area, but even 7-inch tablets give you more space for displaying content and engaging users.
As you consider the UI of your app when running on tablets, make sure that it is taking full advantage of extra screen area available on tablets. Here are some suggestions:
- Look for opportunities to include additional content or use an alternative treatment of existing content.
- Use multi-pane layouts on tablet screens to combine single views into a compound view. This lets you use the additional screen area more efficiently and makes it easier for users to navigate your app.
- Plan how you want the panels of your compound views to reorganize when screen orientation changes.
- While a single screen is implemented as an
Activity
subclass, consider implementing individual content panels asFragment
subclasses. This lets you maximize code reuse across different form factors and across screens that share content. - Decide on which screen sizes you’ll use a multi-pane UI, then provide the different layouts in the appropriate screen size buckets (such as
large
/xlarge
) or minimum screen widths (such assw600dp
/sw720
).
Related resources:
|
4. Use Icons and other assets that are designed for tablet screens
So that your app looks its best, make sure to use icons and other bitmap assets that are created specifically for the densities used by tablet screens. Specifically, you should create sets of alternative bitmap drawables for each density in the range commonly supported by tablets.
Table 1. Raw asset sizes for icon types.
Density | Launcher | Action Bar | Small/Contextual | Notification |
---|---|---|---|---|
mdpi |
48x48px | 32x32px | 16x16px | 24x24px |
hdpi |
72x72px | 48x48px | 24x24px | 36x36px |
tvdpi |
(use hdpi) | (use hdpi) | (use hdpi) | (use hdpi) |
xhdpi |
96x96px | 64x64px | 32x32px | 48x48px |
Other points to consider:
- Icons in the action bar, notifications, and launcher should be designed according to the icon design guidelines and have the same physical size on tablets as on phones.
- Use density-specific resource qualifiers to ensure that the proper set of alternative resources gets loaded.
Related resources:
|
5. Adjust font sizes and touch targets for tablet screens
To make sure your app is easy to use on tablets, take some time to adjust the font sizes and touch targets in your tablet UI, for all of the screen configurations you are targeting. You can adjust font sizes through styleable attributes or dimension resources, and you can adjust touch targets through layouts and bitmap drawables, as discussed above.
Here are some considerations:
- Text should not be excessively large or small on tablet screen sizes and densities. Make sure that labels are sized appropriately for the UI elements they correspond to, and ensure that there are no improper line breaks in labels, titles, and other elements.
- The recommended touch-target size for onscreen elements is 48dp (32dp minimum) — some adjustments may be needed in your tablet UI. Read Metrics and Grids to learn about implementation strategies to help most of your users. To meet the accessibility needs of certain users, it may be appropriate to use larger touch targets.
- When possible, for smaller icons, expand the touchable area to more than 48dp using
TouchDelegate
or just centering the icon within the transparent button.
Related resources:
|
6. Adjust sizes of home screen widgets for tablet screens
If your app includes a home screen widget, here are a few points to consider to ensure a great user experience on tablet screens:
- Make sure that the widget’s default height and width are set appropriately for tablet screens, as well as the minimum and maximum resize height and width.
- The widget should be resizable to 420dp or more, to span 5 or more home screen rows (if this is a vertical or square widget) or columns (if this is a horizontal or square widget).
- Make sure that 9-patch images render correctly.
- Use default system margins.
- Set the app’s
targetSdkVersion
to 14 or higher, if possible.
Related resources:
|
7. Offer the app’s full feature set to tablet users
Let your tablet users experience the best features of your app. Here are some recommendations:
- Design your app to offer at least the same set of features on tablets as it does on handsets.
- In exceptional cases, your app might omit or replace certain features on tablets if they are not supported by the hardware or use-case of most tablets. For example:
- If the handset uses telephony features but telephony is not available on the current tablet, you can omit or replace the related functionality.
- Many tablets have a GPS sensor, but most users would not normally carry their tablets while running. If your phone app provides functionality to let the user record a GPS track of their runs while carrying their phones, the app would not need to provide that functionality on tablets because the use-case is not compelling.
- If you will omit a feature or capability from your tablet UI, make sure that it is not accessible to users or that it offers “graceful degradation” to a replacement feature (also see the section below on hardware features).
8. Don’t require hardware features that might not be available on tablets
Handsets and tablets typically offer slightly different hardware support for sensors, camera, telephony, and other features. For example, many tablets are available in a “Wi-Fi” configuration that does not include telephony support.
To ensure that you can deliver a single APK broadly across the your full customer base, make sure that your app does not have built-in requirements for hardware features that aren’t commonly available on tablets.
- Your app’s manifest should not include
<uses-feature>
elements for hardware features or capabilities that might not be available on tablets, except when they are declared with theandroid:required=”false”
attribute. For example, your app should not require features such as:android.hardware.telephony
android.hardware.camera
(refers to back camera), orandroid.hardware.camera.front
- Similarly, your app manifest should not include any
<permission>
elements that imply feature requirements that might not be appropriate for tablets, except when accompanied by a corresponding<uses-feature>
element declared with theandroid:required=”false”
attribute.
In all cases, the app must function normally when the hardware features it uses are not available and should offer “graceful degradation” and alternative functionality where appropriate. For example, if GPS is not supported on the device, your app could let the user set their location manually. The app should do run-time checking for the hardware capability that it needs and handle as needed.
Related resources:
|
9. Declare support for tablet screen configurations
To ensure that you can distribute your app to a broad range of tablets, declare all the screen sizes that your app supports in its manifest:
- Declare a
<supports-screens>
element with appropriate attributes, as needed. - If the app declares a
<compatible-screens>
element in the manifest, the element must include attributes that specify all of the size and density combinations for tablet screens that the app supports. Note that, if possible, you should avoid using this element in your app.
Related resources:
|
10. Follow best practices for publishing in Google Play
- Publish your app as a single APK for all screen sizes (handsets and tablets), with a single Google Play listing:
- Easier for users to find your app from search, browsing, or promotions
- Easier for users to restore your app automatically if they get a new device.
- Your ratings and download stats are consolidated across all devices.
- Publishing a tablet app in a second listing can dilute ratings for your brand.
- If necessary, you can alternatively choose to deliver your app using Multiple APK Support, although in most cases using a single APK to reach all devices is strongly recommended.
- Highlight your app’s tablet capabilities in the product details page:
- Add at least one screenshot taken while the app is running on a tablet. It’s recommended that you add one screenshot of landscape orientation and one of portrait orientation, if possible. These screenshots make it clear to users that your app is designed for tablets and highlight all the effort you’ve put into designing a great tablet app experience.
- Mention tablet support in the app description.
- Include information about tablet support in the app’s release notes and update information.
- In your app’s promo video, add shots of your app running on a tablet.
- Make sure you are distributing to tablet devices. Check the app’s Supported Devices list in the Developer Console to make sure your app is not filtered from tablet devices that you want to target.
- Let tablet users know about your app! Plan a marketing or advertising campaign that highlights the use of your app on tablets.
Related resources:
|
Setting Up a Test Environment for Tablets
To assess the quality of your app on tablets — both for core app quality and tablet app quality — you need to set up a suitable hardware or emulator environment for testing.
The ideal test environment would include a small number of actual hardware devices that represent key form factors and hardware/software combinations currently available to consumers. It’s not necessary to test on every device that’s on the market — rather, you should focus on a small number of representative devices, even using one or two devices per form factor. The table below provides an overview of devices you could use for testing.
If you are not able to obtain actual hardware devices for testing, you should set up emulated devices (AVDs) to represent the most common form factors and hardware/software combinations. See the table below for suggestions on the emulator configurations to use.
To go beyond basic testing, you can add more devices, more form factors, or new hardware/software combinations to your test environment. For example, you could include mid-size tablets, tablets with more or fewer hardware/software features, and so on. You can also increase the number or complexity of tests and quality criteria.
Table 1. A typical tablet test environment might include one or two devices from each row in the table below, with one of the listed chipsets, platform versions, and hardware feature configurations.
Type | Size | Density | Version | AVD Skin |
---|---|---|---|---|
7-inch tablet | large or-sw600 |
hdpi ,tvdpi |
Android 4.0+ | WXGA800-7in |
10-inch tablet | xlarge or-sw800 |
mdpi ,hdpi |
Android 3.2+ | WXGA800 |
2012년 10월 4일
by aduris
0 comments
Content & Service 기획 전문가 | 30 | 22 | ||
모바일 디자인 전문가 | 30 | 22 | ||
모바일 마켓 분석을 위한 논리적 구조화 및… | 2 | 04 | ||
모바일 디자인을 위한 Photoshop Skill-Up | 3 | 10 | ||
개발자를 위한 앱UI 설계 가이드 | 1 | 05 | ||
모바일 마켓 분석을 위한 논리적 구조화 및… | 2 | 01 | ||
[앱비지니스창업]스마트 앱과 지식재산권 | 1 | 15 | ||
[앱비지니스창업]창업가를 위한 법률 강의 | 1 | 22 | ||
[앱비지니스창업]앱창업자가 알아야할 세무… | 1 | 06 | ||
논리적 사고와 기획안 작성 | 2 | 03 | 17 | |
스마트 모바일 서비스 시장 분석 | 2 | 11 | 15 | |
T store 상용화 및 비즈니스 실무 | 1 | 14 | 12 | |
스토리텔링을 통한 모바일 서비스 시나리오… | 3 | 12 | ||
모바일 산업 동향 및 비즈니스의 이해 | 2 | 24 | 12 | |
모바일 서비스 기획 | 3 | 25 | 06 | |
모바일 서비스 기획을 위한 정보수집/분석 … | 3 | 03 | ||
App 사례분석을 통한 비즈니스 모델 기획 | 3 | 24 | ||
앱 아이디어 도출 및 사업기획서 작성 | 5 | 03 | 29 | |
모바일 산업 동향 및 비즈니스의 이해 | 2 | 13 | ||
모바일 게임 애플리케이션 기획 | 5 | 17 | 15 | |
모바일 웹 앱 동향 | 1 | 06 | ||
모바일 애플리케이션 GUI 디자인 | 5 | 17 | 22 | |
모바일 증강현실 기술 및 서비스 동향 | 1 | 08 | 10 | |
모바일 마케팅 커뮤니케이션 | 3 | 08 | ||
스마트 모바일 서비스 시장 분석 | 2 | 15 | ||
모바일 마케팅 커뮤니케이션 | 2 | 15 | ||
모바일 증강현실 기술 및 서비스 동향 | 1 | 05 |
Android Application 프로그래밍 전문가 | 42 | 04 | ||
iPhone Application 프로그래밍 전문가 | 42 | 04 | ||
Android 플랫폼 아키텍쳐 분석 | 1 | 04 | ||
Java Script 기초 (HTML5 활용을 위한) | 3 | 03 | ||
Unity3D를 활용한 3D 컨텐츠 개발 | 2 | 20 | ||
Java Script 기초(HTML5 활용을 위한) | 2 | 03 | ||
Java Script 중급 (HTML5활용을 위한) | 3 | 08 | ||
모바일 소프트웨어 개발을 위한 Agile 방법… | 2 | 05 | 24 | |
Android Application 프로그래밍 | 10 | 10 | 29 | |
Android Network 고급활용 | 5 | 10 | ||
HTML5 & CSS3 활용 | 2 | 06 | ||
iPhone을 위한 Objective C | 3 | 26 | ||
Android 를 위한 Advanced JAVA | 3 | 03 , 26 | 08 | |
Android 기반의 모바일 게임 프로그래밍 | 5 | 15 | ||
Open API 활용 | 1 | 27 | ||
iPhone Application 프로그래밍 | 10 | 10 | ||
(HTML5 활용)K-Apps 개발 전문인력 양성 과… | 4 | 11 | ||
HTML5와 CSS3를 이용한 모바일 웹 프로그래… | 5 | 24 | ||
Android Multimedia 응용 프로그래밍 | 5 | 17 | ||
Windows Phone을 위한 C# 프로그래밍 | 2 | 12 | ||
Android GCM 기반의 애플리케이션 구축 실… | 1 | 01 | ||
안드로이드 플랫폼 아키텍쳐 분석 | 2 | 15 | ||
안드로이드 TCP/IP & Bluetooth | 2 | 20 | ||
안드로이드 HTTP 고급 프로그래밍 | 2 | 17 | ||
모바일 서버 프로그래밍 기본 | 5 | 15 |
2012년 9월 21일
by kangbw
1 Comment
이번 Xcode 4.5 (4G182) 에서 새로 나온 iPhone 5용 스플래쉬 화면을 설정하도록
되었다. 설정을 안 하면 다음과 같은 경고 메시지가 나온다. (클릭하면 확대됩니다)
‘Missing Retina 4 launch image’ 라는 경고가 나오는데 말 그대로 ‘Retina 4 용 Default이미지를 넣으라’는 말이다.
친절하게 Default-568h@2x.png 라구 파일명도 설명해 준다.
궁금한 점이 생겼다.
혹시 기존에 iPhone3 와 4용 Default.png 파일이 프로젝트에 설정되어 있으면
자동으로 iPhone 5용 이미지를 생성해 주는 것은 아닐까?
그래서 테스트를 위해 이미지를 준비하였다.
그리고 나서 첫번째 첨부한 이미지의 ‘Add’ 버튼을 선택해 보았다.
앗.. ‘Add’ 버튼의 뜻이..
그냥 검은색 빈 이미지 파일을 추가해 준다는 뜻이었다.
결국 iPhone5 용 디폴트 이미지는 직접 디자이너가 크기에 맞추어 작업해주어야 한다는 결론.
Xcode의 경고를 무시하지 말고, Default-568h@2x.png 는 준비하는 것이 좋을것 같다.
왜냐하면 이 경고를 무시했을때 앱스토어 심사에서 리젝 대상이 되는지 아직 사례 아는것이 없기 때문이다.
만에 하나의 리젝 가능성도 피하는 것이 앱 개발의 기본.
(참고로 크기는 애플에서 발표한것과 같이 640 가로 1136 세로로 확인.)
2012년 9월 13일
by gdkim
1 Comment
얼마 전, 서비스 디자인에 관한 포스팅에서 UI 와 UX의 가장 큰 차이점은 ‘Holistic’한 관점, 그리고 UX와 서비스 디자인의 가장 큰 차이점은 ‘Evidencing’이라고 정리한 바 있다. 후자에 관해서는 별도의 글을 쓰도록 하고, UI와 UX의 차이에 대해 설명해 보기로 한다.
피엑스디에서 비과학적으로 조사한 “UI와 UX 인식 차이에 관한 조사“에 따르면, 본인이 UI/UX를 꽤 안다고 생각하는 사람들 중 60% 정도만이 두 가지를 구분하여 사용한다고 대답하는 것으로 보아, 많은 사람들이 차이를 잘 모르거나 굳이 구분할 필요가 없다고 생각하는 것 같다. 앞서 UX의 정의에 대해 설명했는데, 차이를 설명하는 것이 대부분의 사람들에게 더 좋은 정의가 될 것 같다.
먼저 영어권의 생각을 살펴 보면,
Quora - What’s the difference between UI Design and UX Design?
StackExchange - Difference between UI and UX
영어뿐만 아니라 국어로도 참으로 많은 답이 있는데, 많은 자료를 필자 마음대로 분석하여 정리하면, 대략 다음과 같은 관점이 있다.
1. UI = UX 라는 관점 (현실적으로 많은 사람들이 이렇게 사용)
1-1. UI가 발전하여 UX가 되었다
2. UI 는 UX의 일부라는 관점
2-1. UI는 화면, UX는 제품,시스템,서비스
2-2. UI는 요소,도구, UX는 목표,감정
2-3. UI 업무 영역의 확장 혹은 우산이 UX
3. UI와 UX는 대등하지만 다르다는 관점
3-1. 디바이스와 이용자간의 매개체가 UI, 매개 후 결과는 UX
많은 답변들을 읽어보면, 결국 위 세 가지 중 하나로 귀착된다는 점을 동의하게 될 것이다. (뭐… 절대 틀릴 수 없는 구분법이다. ㅎㅎ 논리적으로 남은 한 가지는 UX가 UI의 일부라는 관점인데, 현실에서 찾기 힘들었다)
어쩌면 세 가지 모두일 수도 있다. 서로 다 비슷한, 결국은 같은 말이 아니냐라고 할 수도 있다. 서로 구분된다고 설문 조사에는 답하면서 실제로는 구분 안 하고 쓰는 사람도 틀림없이 많을 것이다. 반대로 세 가지가 매우 다르다고 할 수도 있다.
국내외의 여러 비공식 조사를 보면, 다수 의견은 대체로 2-2인 듯 하다. (좀 더 엄밀한 조사가 있을텐데 필자가 못 찾고 있는 듯 합니다. 제보 부탁드립니다) 이 답변은 Quora의 1위 답변, StackExchange의 1위 답변이 이러한 내용이라고 보이고, 피엑스디가 진행한 설문 조사에서도 60% 가까운 지지를 받았다. UI는 UX의 한 요소이며, UX의 경우 인터페이스 외에도 많은 것을 고려해야한다는 의미인데, 그 중에서도 특히 인간이 갖고 있는 목표나 감정을 고려해야한다. 이렇게 관찰/연구한 후에 결국 이를 “시각화”한다거나, 결과물을 만들 때는 다시 UI가 된다고 생각하는 관점이다. 피엑스디 조사의 기타 응답에서, UX의 시각화 혹은 결과물이 UI라고 답변해 주신 분들이 여기에 포함된다.
이 외에도 2-3은 UX가 UI를 확장하여 Information Architecture나 Visual Design까지 모두 포함했다든지, 이들 모두를 아우르는 “우산”으로서 UX를 이해하는 관점이 있는데 이 역시 UI를 UX의 일부로 생각하는 것이다. Quora의 2위 답변인 Dan Saffer의 그림(오른쪽)이 여기에 해당되고, 나는 UX디자이너인가 UI디자이너인가? 글도 여기에 해당된다고 생각한다(해당 글의 저자는 여기에 동의하지 않는다. ㅎㅎ)
2-1의 관점은, 피엑스디 조사에서 교수/연구자들에게 가장 많은 지지를 얻은 관점이었다. 대상 영역을 확장하는 것이 가장 중요한 차이점이라는 관점이다.
마지막으로 3-1도 매우 흥미로운 관점인데, 사전 문헌 조사할 때도 특별히 나오지 않았고, 파일롯 조사에서도 나오지 않았지만 본 조사할 때 ‘기타’의견에서 몇 분이 동시에 지적해 준 관점이다. 다르게 표현하면, 인터페이스는 인터페이스고, 경험은 경험이니까 서로 다른 것이 당연하고, 사용자가 인터페이스를 접한 다음 얻게 되는 것이 경험이라는, 즉 UI의결과물이 UX라는 관점이다. 2-2와 3-1은 거의 같은 말로 보이지만, 서로 완전히 다른 출발을 갖고 있다. “UX를 설계한다”라고 말했을 때, 2-2 관점의 사람은 UI도 하고 있는 것이지만, 3-1 관점의 사람은 UI는 안 하고 있는 것이다. 어떤 사람에겐 UI가 UX의 결과물(2-2)이지만, 어떤 사람에겐 UX가 UI의 결과물(3-1)이다.
어설픈 조사지만 피엑스디 자체 조사를 가지고 숫자를 만들어 보면,
(모른다거나 차이가 없다고 대답한 사람들의 차이 내용에 답변 내용은 무시하면)
차이가 없다 | 36.7% | UI=UX | 1-1 UI가 발전하여 UX가 되었다 | 36.7% |
차이가 있다 | 67.3% | UI⊂UX | 2-1 UI는 화면, UX는 제품,시스템,서비스 | 9.6% |
2-2 UI는 요소,도구 UX는 목표,감정 | 35.1% | |||
2-3 UI+ID+IA+VD = UX | 9.3% | |||
UI≠UX | 3-1 UI는 매개체, UX는 그 결과 | ?? |
만들어진 숫자는 너무 믿을 필요가 없다. 두 가지 질문에 대한 답을 섞은 것이고, 두 번째 질문은 복수 응답이었으며, 위에 없는 보기 문항도 있었는데다가, 빠진 보기 문항도 있으니까. 수학 기호도 엄밀히 말하면 저렇게 쓰면 안된다. 그래서 대강의 느낌만 보자면, 1-1과 2-2가 비슷한 듯 하다. 3-1은 1.3% 정도 나왔지만 보기 문항에 없었으므로 같이 비교하긴 곤란하다.
그러나 UX의 정의가 그랬듯이 이렇게만 봐서는 무엇이 딱! UX의 차이인지 잘 감이 안 온다. 대략 무엇인지는 알겠는데, 그걸 구분할 수 있는 예를 들어보라고 하면 뭐를 예를 들어야할지 모르겠다. 우선 다른 사람들의 예를 먼저 살펴보자.
예를 들어,
UI는 인터페이스, UX는 인터랙션까지 고려한 것이다.
-> 이것은 2-3, 특히 Dan Saffer의 관점을 너무 단순하게 만든 것인 듯. UI도 인터랙션 고려한다. 사용자의 반응이나 감정도 고려한다. UX는 이것보다는 좀 더 많은 부분을 고려한 것 아닐까?
UI는 기술적인 부분, UX는 감성적인 부분
-> 이것은 2-2를 너무 단순화한 것인 듯. UI도 분명 감성적인 부분을 다루고 있다. 중요한 건 인간을 분석하여 조각난 감정을 보는 것이 아니라, 총체적인 인간 감정에 공감한다는 것이 차이라고 필자는 생각한다.
버튼이나 창의 배치가 UI, 버튼을 누르면 창이 뜰꺼라고 예상하는 것은 UX
-> 말 그대로 읽어보면, 예측가능성이 UX의 차이점이라고 쓴 것이 되어 완전히 잘못된 내용이다. UI에서도 GOMS나 많은 도구들이 이 부분을 강조한다. 아마도 이 글을 쓰신 분은 인간 “경험”이 이전의 경험이나 예상을 포함하고 있다는 뜻으로 쓴 듯 한데, 이는 2-2를 너무 단순화한 것 같다.
보기엔 좋아보이는데 (UI), 사용하려니 불편하다(UX)
-> 영문 블로그를 한국어로 번역하여 많이 돌아다니는 호텔방에서의 안 좋은 경험에 관한 이야기인데, 대부분 그냥 사용성(usablity)이 나쁜 것 아닐까? 멋지게 보이는 UI vs 쓰기 불편한 UX에 관한 이 글은 대표적인 UI/UX 차이에 대한 오해이다.
한글 인터넷 검색으로 찾아본 몇 가지 사례를 보면, 사실 맞는 것이 없다고 할 정도로 모두 이상하게 구분하고 있다. 영어에서도 같은 지적(틀린 예가 너무 많다!)을 많은 사람들이 한다. 차이는 꽤 분명한데, 왜 예를 들기만 하면 모두 이상해져 버리는 걸까? 다들 아는 척 하지만 실은 모르거나, 그 차이란 것이 처음부터 없는 거 아닐까?
필자 생각에, UI와 UX의 가장 큰 차이가 대상의 차이(2-1)라거나 업부 분야의 차이(2-3)라고 할 때는 간단하게 설명되는 데, 목표/감정(2-2)이라고 할 때는 이것을 자꾸 영역의 차이라고 생각하기 때문에 오류가 생기는 듯 하다. 다시 말하면, UI는 감정이 없고, UX는 감정을 고려한다거나, UI는 뭐가 없고, UX는 뭐가 더 있는 식으로.
좀 더 길게 설명해 보면, 우선 1-1이나 3-1 관점의 사람들은 굳이 이런 비교를 할 필요가 없다. 완전히 같거나, 완전히 다른 것이므로. 또 만약 2-1 관점의 사람이라면, 아이폰 UI를 설계할 때, 외관 디자인이나, 박스 개봉의 경험, 아이튠즈나 앱스토어까지 고려하면 UX라고 설명하면 명쾌하다. 2-3 관점의 사람들은 이러한 일을 화면 디자이너만 혼자 하는 것이 아니라, 상호작용 디자이너, 정보 설계자, 시각 디자이너, 그리고 좀 더 넓혀서 마케팅이나 개발, 경영진까지 함께 하나의 단일한 경험을 만들기 위해 협업했다면 UI가 아닌 UX를 했다고 설명하면 쉽다.
문제는 2-2 관점이다. 굳이 작업 대상이나 작업자의 영역을 넓히지 않아도, 단순한 인터페이스에서 경험의 영역으로 넓힐 수 있다고 주장하는 이 관점의 사람들은 같은 화면 디자인을 하더라도, UI 를 만들 때 사용하는 사람의 정황을 좀 더 폭넓게 살펴보고, 그 사람의 목표에 공감하고, 결과적으로 이 화면을 사용하면서 형성하게 될 그 사용자의 감정,태도,행동의 변화를 염두에 두고 설계를 했다면 UX를 한 것인데, 그 결과에 있어서 UX를 했다고 해서, 딱히 UI 때는 없는 어떤 특정 버튼이 UX를 하면 생긴다든지, UI를 하면 네모로 만들었던 버튼이 UX를 하면 둥근 사각형이 된다든지 하는 차이는 없게 되는 것이다.
그래서 필자는, UI-UX는 시대의 흐름에 따른 사고 방식의 차이이며, 이에 따라 UI 단계에서는 보지 못 했거나 보았더라도 간과하기 쉬웠던 컨텍스트와 총체적 인간이 가진 목표 그리고 그 인간의 감정/태도/행동의 변화를 보게 된 것이며, 이를 통해 동일한 UI를 설계하더라도, 훨씬 쉽게 혁신적이고 일관된 경험을 느낄 수 있는 UI를 만들 수 있는데 이것이 UX 설계라고 생각한다.
그렇다면 아래 예를 한 번 보자.(출처:UXFactory)
우선 이 소프트웨어의 설계자는, 소프트웨어의 ‘경험’을 향상시키기 위하여 OS나 Installer를 바꿀 순 없었을 것이다. ‘업무 대상의 확장(2-1 관점)’은 못 한 것이다. 또 이 작업을 IA나 Visual Designer가 함께 했는지, 경영진의 지시가 있었는지는 알기 어렵지만 UI 설계하는 사람의 힘만으로도 충분히 할 수 있으니까 꼭 ‘업무 영역의 확장(2-3 관점)’이 있었을 필요는 없을 것 같다. 하지만 그는 사용자의 ‘콘텍스트’를 충분히 이해하고 있으며, 사용자의 감정에 완전히 공감하고 있다. 그래서 친절한 설명과 함께 ‘sorry’라는 단어를 넣은 것이다. 김영재 님께서 적절히 지적하였듯이 이 단어 하나로 사용자는 완전히 다른 ‘감정,태도,행동’을 갖게 되었다. 이것이 경험 디자인이다.
대개의 UI 가이드라인은, 사용자에게 생길 수 있는 상황에 대해 자세히 설명하고, 그 과정에서 있을 수 있는 불편함을 잘 설득하라고 되어 있지만… 어쩔 수 없는 경우 ‘사과’하라고 씌여있는 것은 본 적이 없다(물론 필자의 지식이 길지 않아서…혹시 있나요?). 대부분의 UI 교과서에서는 분명히 사용자의 감정에 대해 언급한다. 예뻐야 하고, 쓰기 즐거워야 하고, 유용해야 하고 등등… 그러나 사용자의 감정에 진정으로 공감하기 전까지는 이러한 **아주 간단한** 사과는 생각해내기 힘들다.
이렇게 사용자에게 완전히 공감하여 설계하면, 그리고 그것을 제품의 모든 인터페이스에서 일관되게 구현하면, 자연스럽게 소프트웨어는 성격(Personality)이 생긴다. 우리가 느끼는 그 제품 특유의 개성(Character)이 생기는 것이다. 그리고 우리는 그것을 인간으로서 “느낀다”. 또 자연히 그걸 싫어하는 사람도 생긴다. 물론 그 성격이 애플처럼 회사부터 제품, 가게까지 일관될 수도 있겠다. 그러나 꼭 그렇게 되지 않더라도 ‘경험’은 형성된다. UX를 말할 수 있다.
‘일관된 경험’은 UI 레벨에서 봤을 때의 일관되게 예쁘거나, 일관되게 즐거운 것, 또 consistency도 포함하겠지만, UX 레벨에서 동일한 성격이 느껴지는 것 혹은 coherent 한 것을 포함하는 것이 되어야 한다.
물론, UI레벨에서는 절대! 저런 sorry는 생각해 낼 수 없을 것이다라고 주장하는 것은 무리가 있겠다.(빠져 나갈 구멍도 좀 만들자) 그러나, 콘텍스트를 이해하고 사용자에게 공감하여 설계하면 훨씬 더 쉽게 사용자들의 ‘경험’을 설계할 수 있고, 사용자들의 ‘감정,태도,행동’을 바꿀 수 있다. 이것은 UI 수준에서 생각하던 것과는 다른 ‘사고 방식의 차이’이며, 이 사고 방식의 차이에 따른 다양한 용어들, 도구들, 아이디어들(경험 디자인, 경험 경제, 디자인 사고, 콘텍스츄얼 디자인, 퍼소나, 골 디렉티드 디자인, 공감, 친절한 소프트웨어)이 모두 1990년대 중반-2000년대 초반이라는 같은 시기에 나왔다는 사실이 UI-UX가 ‘사고 방식의 차이’라는 방증이라고 생각한다.
UI와 UX는 사고 방식의 차이
사고 방식의 차이에서 가장 큰 특징은 세 가지로 요약해 볼 수 있다..
1. 양적 사고에서 질적 사고로
UI 시절의 중심 생각은 어떻게 하면 시간을 단축할 수 있는가, 어떻게 하면 효율적으로 할 수 있는가, 어떻게 하면 이익을 낼 수 있는가? 이런 것들이 목표이고, 이를 위해서 어떻게 하면 객관적이고 과학적인 데이터를 얻을 수 있는가?였다. 샘플링은 어떻게 해야 과학적이고, 실험은 어떻게 해야 오류가 없으며, 거기서 발견한 문제점들은 어떻게 평가해야하는가 하는 것이 초점이다. 대개의 경우 정량적 실험이 우선시된다.
하지만 이런 것들이 조금 더 편리하고 만들 수 있을지 몰라도, 사람들이 좋게 느끼는 것과는 거리가 있다는 점을 깨달으면서, 많은 정성적 사고 방법, 즉 ‘질적 사고’가 나타났다. 따라서 많은 UI 회사들도 사용자 연구에서 정성적 조사로 돌아섰다. InContext 같은 회사는 structured interview 대신 contextual inquiry를 주장했다(2000년 피엑스디-전신-에서 처음 C-I를 진행했을 때, 삼성전자 담당자가 신기해하면서도 객관성을 잃을까봐 꺼려했던 기억이 난다)
2. 분석 도구에서 공감 도구로
10년 전에 처음 nhn과 일했을 때, 그 회사 담당자가 ‘피엑스디는 task analysis에 약한 것 같다’라고 충고해 준 적이 있다. 그 때 알아차렸어야 했다. 내가 하고 있는 것이 UI 가 아니고 UX란 사실을. UI에서 사용하는 도구들은 GOMS, Fitt’s law, 등과 같이 모두 인간을 ‘분석’하는 도구들이다.
그러나 UX 도구 중 중요한 명작들은 모두 인간에 대한 총체적 공감을 이끌어 내기 위한 도구들이다. 제일 대표적인 것이 쿠퍼의 퍼소나이다. 2002년 처음 필자가 쿠퍼에게 퍼소나를 배워 프로젝트에 활용한 이후, 이 방법은 피엑스디에서 많은 혁신을 이끌어 내는 도구로 자리잡았다. 안타깝게도 주변에서 볼 수 있거나 인터넷에서 찾을 수 있는 대부분의 ‘페르소나’들은 퍼소나가 아니다. 퍼소나의 가장 중요한 목적은 ‘공감’이다. 각 개인이 갖고 있는 목적(Goal)을 정확히 이해하고, 이를 둘러싼 인간의 모든 정황을 하나의 단일한 인간으로 이해, 즉 ‘공감’을 해야만 혁신을 이룰 수 있고, 그래서 UX 도구라고 말할 수 있다.
3. 통계적 신뢰성에서 전략적 타당성으로
Cooper U Interaction Design 코스에서 필자가 Cooper에게 물었던 질문이, “그렇게 조사해서 어떻게 데이터나 전략의 신뢰성을 확보하냐?”였는데, 그 때 Cooper가 해 준 말이 적은 수의 정성 조사이지만, 조사 결과를 보면 누구나, 특히 고객 쪽에서 긍정할 수 있다는 점이었다(“Customers will recognize your persona”). 2003년 InContext가 처음으로 코스를 개설했을 때 참여했던 필자가 Karen Holtzblatt에게 물었던 질문도 같았다. “그렇게 조사해서 어떻게 데이터나 전략의 신뢰성을 확보하냐?” 그랬더니 Karen 아줌마가 해 준 말이, “적은 수의 조사라도 이상한 사람이 샘플링될 일은 없으니까 걱정마라”였다. IDEO의 책을 읽다보니 거기서도 그랬던 것 같다. 사실 모든 정성 조사 결과 발표의 첫번째 질문은 ‘신뢰성’에 관한 것이었고, 피엑스디가 SKT의 프로젝트를 맡아 임원 발표하던 2004년에 받은 첫번째 질문도 마찬가지였다.
그 시대는 UI 안에서나 밖에서나 강하게 ‘신뢰성’을 요구하던 시기였기에 샘플링의 공정함, 최소 숫자 샘플링 확보, 데이터 분석의 과학성이 필요했다. 그리고 점점 이러한 소비자 조사에 사람들은 고개를 흔들기 시작했다. 그러나 개별 화면 요소의 엄밀함을 따지는 UI와 달리 UX는 이러한 질적 사고와 공감 도구를 활용하여 통계적 신뢰성 보다는 전략적으로 타당한 혁신을 이루어 내는데 초점을 맞추는 식으로 사고 방식이 전환되어 표현되었다고 생각한다. IDEO의 ‘디자인 사고(Design Thinking)’가 추구하는 핵심 변화 역시 신뢰성에서 타당성으로 변화하는 것이라고 로저 마틴이 ‘디자인 씽킹’이란 책에서 지적한 바와 같다.
소비자의 변화가 이유
이렇게 많은 사람들의 생각이 “동시에” 바뀌게 되었다면 그것은 틀림없이 사회적인 환경의 변화가 이유일 것이다. 더 이상 공급자 중심으로 물건을 만들면 팔리던 시대가 지나가고, 살 수 있는 물건은 넘치고 소비자들에게 물건의 기능이나 단순 외관 이상으로 호소를 해야만 물건을 팔 수 있는 소비자 중심의 시대가 선진국에서 펼쳐진 덕분이라고 추측해본다. 각 개인의 개성을 이해해야 할 뿐만 아니라, 사람들이 무엇을 이루려고 하는가에 대한 근본적인 목적을 이해한 제품들이 혁신의 이름을 달고 시장을 장악하는 사례들이 많아지면서, 인간을 단순히 ‘분석’하는 것이 아니라, 인간에게 진정으로 ‘공감’해야만 얻을 수 있는 인사이트를 제품에 반영해야만 혁신적인 제품이 나올 수 있다는 사실을 많은 사람들이 깨달은 것이다.
[참고]
Quora 1위 답변
2-2 UI는 요소,도구(설계도) UX는 목표,감정 으로 설명하는 듯 합니다. 물론, 왼쪽 설계도(UI)에도 파리를 그려 넣을 수 있습니다만…
Quora 2위 답변
There are a lot of erroneous answers in this thread.
Simply put: UX is the overall experience one has with a product or service, which can include a UI. A UI is typically a combination of visual design (the look and feel) and the interaction design (how it works). UX, however, can encompass a wide range of disciplines, from industrial design to architecture to content.
A diagram I did a few years ago:
2-3 UX는 UI를 포함한 다양한 업무 영역을 포괄하는 개념을 설명하는 듯 합니다.
Quora 3,4위 답변 (필자가 발췌 편집)
2-1 or 2 or 3 UI는 인터페이스, UX는 콘텐트와 인터페이스를 포함한 전체적 상품 (그릇이나 시리얼은 인터페이스가 없는 걸까요?)
StackExchange 1위 답변
From Wikipedia:
- User Interface - The aggregate of means by which users interact with the system (e.g., all the means of input and output)
- User Experience - The architecture and interaction models that impact a user’s perception of a device or system (“all aspects of the user’s interaction with the product”).
So it seems like UI would deal with the “how” of creating an interface (implementing shiny controls, that sort of thing) and UX would deal with the “why” (creating a good experience for the user).
2-2 UI는 요소,도구(how)이고, UX는 목적,감정(why)
StackExchange 2위 답변 (강조는 필자)
Yes, they do. Suppose you know (actually you don’t need to “know”, just “feeling” or “suspecting” is enough) that I collect your IP address, your identity and your search terms, and that other people can get access to this knowledge. Whereas you use Google with relative comfort, won’t you fee uneasy about your privacy while using my app? Won’t you become a tad paranoid?
That’s UX. Same UI, same interaction, … yet, you “experience” different things, feelings, emotions, moods, and so on. That’s UX. 하략…
2-2 UI는 요소, UX는 감정 혹은 2-1 UI는 화면, UX는 회사,브랜드,신뢰
The Spectrum of User Experience (By Information Architects)
2-3 UX는 UI를 포함한 다양한 업무 영역의 총합
UX is not UI by Nicolas Demange (해설 by boowoon)
2-2 UI는 기술, UX는 감정
실용적인 의미에서 두 가지를 굳이 구분해야하나?
Shawn Borsky: The Difference Between UI and UX 를 읽어보면, 현실적으로 많은 사람들이 혼용하여 사용하지만, 적당한 업무를 찾을 때, 적당한 사람을 찾을 때 등 두 가지를 혼용하여 시간 낭비하는 경우가 많으니까 반드시 구분해서 사용해야 한다는 점에 동의할 수 있게 된다. “정말” 다르다면.
출처: http://story.pxd.co.kr/
최근 답글