SlideShare a Scribd company logo
어플 디자인
하기 전에 알아두자
손가락이 닿는 타깃의 주위
엔
꽤나 넓은 면적의 오류 대비
용 여백이 항시 존재해야 한
다.

사용자가 인터페이스를 조작
하면서 화면을 가리는 일이
없도록 배려하라.
보통 조작버튼은 화면 가장자리에
중요한 콘텐츠는 화면 가운데에 위치한다.
화면을 돌렸을 때
앱의 각 페이지들을
어떻게 구성할 것인지를
충분히 고민하라.
1536
640     960
  768         1024

  480         320
          2048
1080

600     800   480

  1280        720
      1024
아이폰의 해상도

     iPhone
     320 × 480

     iPhone 4
     640 × 960

       iPad
     768 × 1024

         +

New iPad 1536 × 2048
안드로이드 해상도


    일반폰
   800 x 480

    HD폰
  1280 x 720

  갤럭시탭 7.0
   1024 x 600

 갤럭시탭 10.1
  1080 x 800
• 모바일 웹(앱) 디자인 한번에 볼수 있는 사이트
• http://dbcut.com/bbs/bbs.php?table=mobile
• http://www.gdweb.co.kr/main/mobileWeb.asp
• https://play.google.com/store
• http://mobile-patterns.com
• http://www.inspred-ui.com
• http://www.lovelyui.com
• http://www.mobiledesignpatterngallery.com/mobile
  -patterns.php
• http://www.patternsofdesign.co.uk
모바일어플디자인

More Related Content

What's hot

iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
Eunjoo Im
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
Booseol Shin
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
Choulhyouc Lee
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
JinHyuck Churn
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
Dong Jin Lee
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028Yun Jin Kim
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
Theodore(Yongbin) Cha
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
정혁 권
 
2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&Csys4u
 
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4Usys4u
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
이창훈
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4Usys4u
 
Xamarin android
Xamarin androidXamarin android
Xamarin android
HyungKuIm
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
성관 윤
 
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
Soojin Ro
 

What's hot (18)

iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
 
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
가장 쉬운 안드로이드 앱 개발 방법 앱인벤터
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C
 
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
 
Xamarin android
Xamarin androidXamarin android
Xamarin android
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
 
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
0.5년차 iOS개발자의 첫 앱스토어 도전기 + 팁
 

Similar to 모바일어플디자인

실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아Amy Young Ah Kim
 
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
 
[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업Nts Nuli
 
CES 2015로 보는 사물인터넷과 플랫폼 전략
CES 2015로 보는 사물인터넷과 플랫폼 전략CES 2015로 보는 사물인터넷과 플랫폼 전략
CES 2015로 보는 사물인터넷과 플랫폼 전략
ByungSun Michael Hwang
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
안드로이드의 다양성과 UI 레이아웃
안드로이드의 다양성과 UI 레이아웃안드로이드의 다양성과 UI 레이아웃
안드로이드의 다양성과 UI 레이아웃
mosaicnet
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom
기현 김
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
dgmit2009
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
mosaicnet
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
Wendyst Communication
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안욱래 김
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
Yescalldotcom, Inc.
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
Minho Lee
 
어랍쇼 발표자료
어랍쇼 발표자료어랍쇼 발표자료
어랍쇼 발표자료NikYromi
 
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?KTH
 
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석KTH, 케이티하이텔
 
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens
영철 권
 

Similar to 모바일어플디자인 (19)

실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아
 
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 
CES 2015로 보는 사물인터넷과 플랫폼 전략
CES 2015로 보는 사물인터넷과 플랫폼 전략CES 2015로 보는 사물인터넷과 플랫폼 전략
CES 2015로 보는 사물인터넷과 플랫폼 전략
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
안드로이드의 다양성과 UI 레이아웃
안드로이드의 다양성과 UI 레이아웃안드로이드의 다양성과 UI 레이아웃
안드로이드의 다양성과 UI 레이아웃
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
 
어랍쇼 발표자료
어랍쇼 발표자료어랍쇼 발표자료
어랍쇼 발표자료
 
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
 
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석
H3 2011 반응형 웹디자인,진짜 할 만 한가?_Fi팀_신현석
 
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens
 

모바일어플디자인

  • 1.
  • 2.
  • 4.
  • 5. 손가락이 닿는 타깃의 주위 엔 꽤나 넓은 면적의 오류 대비 용 여백이 항시 존재해야 한 다. 사용자가 인터페이스를 조작 하면서 화면을 가리는 일이 없도록 배려하라.
  • 6.
  • 7. 보통 조작버튼은 화면 가장자리에 중요한 콘텐츠는 화면 가운데에 위치한다.
  • 8.
  • 9. 화면을 돌렸을 때 앱의 각 페이지들을 어떻게 구성할 것인지를 충분히 고민하라.
  • 10. 1536 640 960 768 1024 480 320 2048
  • 11. 1080 600 800 480 1280 720 1024
  • 12. 아이폰의 해상도 iPhone 320 × 480 iPhone 4 640 × 960 iPad 768 × 1024 + New iPad 1536 × 2048
  • 13. 안드로이드 해상도 일반폰 800 x 480 HD폰 1280 x 720 갤럭시탭 7.0 1024 x 600 갤럭시탭 10.1 1080 x 800
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. • 모바일 웹(앱) 디자인 한번에 볼수 있는 사이트 • http://dbcut.com/bbs/bbs.php?table=mobile • http://www.gdweb.co.kr/main/mobileWeb.asp • https://play.google.com/store • http://mobile-patterns.com • http://www.inspred-ui.com • http://www.lovelyui.com • http://www.mobiledesignpatterngallery.com/mobile -patterns.php • http://www.patternsofdesign.co.uk