Show
개설자 정보
· 문의사항은 메일 / 전화를 이용해주세요 모바일 안드로이드가이드 마스터&웹 UX / UI디자인 실전 교육-고급반5기UX/UI 현 디자이너의 스파르타식 모바일,웹&모바일앱 디자인실무교육
앵콜 선택 시 개설자에게 모임 개설이 요청됩니다. 지도보기[서울 마포구 서교동 325-2] 서울 마포구 서교동 1.5층 참여신청/취소 안내
사용자 인터페이스 디자인을 시작하기에 앞서 알아야할 기본 규격Interface Design, Interactive Design, UI, UX, GUI , HCI 등 다양한 용어는 앱이나 웹을 처음 디자인하는 입문자에게는 큰 혼란을 가져온다.나 또한 스타트업을 처음 시작할 당시에 앱 서비스를 디자인을 하려다보니 저런 용어들을 처음 접하게 됐는데 그 용어의 뜻에만 집착을 했던 경험이 있다. 저런 용어의 차이점을 자세히 알기보다 당장 웹과 앱 디자인을 해야하는 상황이라면 쉽게 생각하자! 내가 보여줄 디바이스 화면에 디자인을 하는 것이다. 너무나 당연하지만 아트보드를 몇 px로 작업해야할지부터가 난감하고 그만큼 외워야할 규격이 많다.  편집이나 인쇄쪽 디자인을 하는 사람에게는 A4, A3, A2 … B4, B3 등 종이의 규격을 알고 종이 재질의 특성과 인쇄 방식에 대해 제대로 알아야 하는 것처럼 사용자 인터페이스 디자인을 하기 위해서는 각종 디바이스의 화면 크기와 OS 별 가이드라인을 알아야 버튼하나를 넣어라도 제대로 디자인할 수 있다. 인터페이스의 실행 기기 정하기웹 디자인을 할 것인가 앱 디자인을 할 것인가, 웹을 반응형으로 할 것인가, 모바일 퍼스트로 할 것인가, iOS에서 아이폰 버전 몇부터 우선시 개발 및 런칭할 목적인가 등의 다양한 경우의 수가 있는데 상황에 맞는 규격을 알아야 한다. 웹의 성향과 앱의 성향이 다르며, 앱에서도 Android OS와 iOS의 차이가 존재한다. 더 깊게 들어가면 Android 안에서도 화면 디바이스마다 화면 비율, 화면 규격, Density 등 다양하고, iOS 역시 아이폰6와 6+가 다르고 에셋의 배율(@2x, @3x) 등의 개념 이해가 필요하다. 1x 배율로 캔버스 만들기나는 개발 환경에 맞도록 아래와 같은 규격으로 캔버스로 설정한다.
가로 x 세로(예 16:9, 16:10)가 같은 비율(ratio)라고 할지라도 Dpi(dots per inch)의 차이로 인해 1:1 배율의 기본 규격으로 작업하는 것이 좋다. 스케치가 없었을 때에는 xxhdpi로 작업을 한 이후에 1px = 1dp인 mdpi로 역계산을 해서 가이드라인을 짜고, 배율별 소스 관리를 해서 넘겨줘야 했다. (엄청난 막노동…) 스케치에서 제공하는 배율 별 Export 시스템 활용과 가이드라인을 도와주는 플러그인 ‘제플린’의 조합으로 더 이상 그럴 필요가 없어졌다. 또한, 디지털에서 벡터(Vector)로 인식하는 SVG 파일 덕분에 아이콘도 배율 별 Export 할 필요가 없어졌다. 반응형 웹(Responsive Web)반응형 웹(Responsive Web)은 디자인을 기반으로 다양한 디바이스(PC, 태블릿PC, 스마트폰, 스마트 TV 등)를 대응하는 웹을 말한다. 기기의 해상도에 따라 혹은 브라우저 화면 크기의 변화에 따라 가변적으로 레이아웃이 반응하여 웹사이트를 나타낸다. 반응형 웹이라는 말이 나온 지 5년 정도 지난 지금 그만큼 반응형이 적용된 웹 사이트들이 수 없이 많아졌고, 웹 디자인도 어느 정도 패턴화되어 있다. 웹사이트하면 당연히 반응형 웹이라는 기본 베이스가 깔려있는 경우도 들은 적이 있다. 반응형 웹의 장점은 세 가지1) 무수히 많은 디바이스 환경에 적합한 인터페이스 제공웹만 존재할 당시 가로폭 980px의 고정 값으로 어떤 크기의 모니터라도 그렇게 보였는데, 이제는 PC, 태블릿, 스마트폰 등 다양한 기종과 다양한 화면 해상도에 맞게 제대로 보여주기 때문에 최적화된 인터페이스를 이용할 수 있다. 2) 효율적인 데이터 관리절대적이진 않지만, 하나의 사이트를 퍼블리싱 하는 경우 미디어 쿼리를 사용해서 하나만 만든다. CSS만 활용해서 특정 화면 크기에 맞는 디자인으로 변경시켜 만들기 때문에 모바일 버전, 데스크톱 버전을 따로 분리해서 만들지 않아도 된다. 데이터역시 한 세트에만 연결하면 되기 때문에 편리하다. 3) 프레임워크 활용워드프레스, 윅스와 같은 플랫폼을 활용할 수도 있지만, 부트스트랩처럼 반응형, 모바일에 중점을 둔 HTML, CSS, JS 프레임워크를 활용할 수도 있다. 부트스트랩의 장점은, JS(JQuery)를 이용한 다양한 기능제공도 있지만, 디자이너가 체감하기에 좋은 부분은 그리드 시스템 제공이다. 부트스트랩은 기본적으로 12단 그리드를 제공한다. (부트스트랩에서 제공하는 맞춤화를 통해 단을 수정할 수 있음) 디자인작업할 시 12단 그리드 시스템으로 하는 것이 가장 효율적이다. 12단은 2, 3, 4, 6으로 나눴을때 정수값이 나온다. 가로폭 전체를 100%라고 봤을 때 2단 레이아웃인 경우 12 / 6 = 2 이기 때문에 100%/2를 하면 50%로 딱 떨어진다. 3단 레이아웃인 경우는 12/4 = 3이고 4단 레이아웃인 경우는 12/3 = 4로 딱 떨어진다. 가끔 포토샵이나 스케치에서 16단, 18단 그리드를 가이드선으로 잡고 작업하는 것을 봤는데, 실제 퍼블리싱 단계에서 정확하게 개발하기 어렵다. 열심히 계산기를 두들겨보며 평소엔 안하던 산수를 해야된다. 또한, 반응형으로 디자인 및 퍼블리싱할 때 개인적으로 부트스트랩의 미디어 쿼리 기준점을 기준으로 잡는다. 그 기준도 데스크탑 퍼스트냐 모바일 퍼스트냐에 따라 퍼블리싱 전략이 달라진다. 분기점(Break Point)를 아래 기준을 그대로 활용하기도 하고 1280, 768, 480px 기준으로 잡기도 한다. 반응형 웹이 한때 뜨거웠던 만큼 관련 글들이 많이 올라오는데, 그중 비관적인 반응형 웹의 종말론을 주장하는 글도 있었다. 하지만, 각종 스마트 기기가 다양해지고 있는 이 시점에 아직도 많은 기업 사이트들과 워드프레스, 윅스 스킨과 테마들을 보면 대부분이 반응형으로 제작된 것을 볼 수 있다. 5년이 지난 지금 어느 정도 정체기가 올 수 있어도, 몇 가지 단점 때문에 사라질 것이라고 생각하진 않는다. 그 단점들은 웹 프론트 앤드 개발 영역에서 해결책들이 나오고 있는 추세이다. 글로벌 기준으로 해상도 파악하기‘Statcounter‘에 의한 데이터를 기준으로 많이 사용하는 해상도를 선택하는 방법도 있다. 글로벌 기준으로 1위는 30% 정도로 1366×768이 사용된다. 2위는 1920×1080으로 20%에 가깝고 점점 늘어나는 추세다. 그 이후는 다 비슷하다. 그러나 처음부터 1920px으로 잡고 작업하는 것보다 1280, 1024px 처럼 낮은 해상도 기준으로 작업해서 보기 좋은 비율을 만든 이후에 좌우로 늘리는 방식을 추천한다. 처음부터 1920px으로 작업하면 스케치나 포토샵 화면에서 줄여서 보는 것과 실제 웹에 퍼블리싱된 것을 보는것의 느낌이 다를 수 있다. 많은 경험이 없는 디자이너에게는 보통 대지(Artboard) 기준으로 여백 대비 콘텐츠 영역을 잡기 때문에 실제로 1440px 같은 해상도로 보면 다소 커보이는 경향도 있다. Android dpi와 dp도트 퍼 인치(Dots per inch, DPI)는 인쇄와 디스플레이 해상도의 측정 단위이며, 특히 1 제곱인치 (2.54 제곱센티미터) 공간 안에 만들어진 점이나 화소의 수를 말한다. Low density (120dpi) (0.75x): ldpi DP를 계산하는 방법은 mdpi 기준으로 1px = 1dp 이다. DP 계산기 : http://labs.rampinteractive.co.uk/android_dp_px_calculator/ 아래 안드로이드디벨로퍼 사이트에 들어가면 상세하게 설명한다. 안드로이드 규격 참고 : https://developer.android.com/guide/practices/screens_support.html iOS 이미지 사이즈와 해상도의 차이처음 아이폰 UI 디자인을 하게 되면 1x, 2x, 3x 이게 무슨 말인지 난감하다.안드로이드의 dpi개념과 비슷한 맥락이다. 디바이스 스크린을 통해 눈에 보이는 실제 크기가 10 x 10 px이라고 가정을 했을때 iPhone 3는 1배, iPhone 4~6, 7 은 2배(@2x), iPhone 6+, 7+는 3배(@3x)를 해줘야 디자이너가 원하는 정확한 사이즈로 보여진다. 참조각종 디바이스별 규격 – https://material.io/devices/ #Android#Design#Gui#Guideline#iOS#Web 신연석Product Designer 스타트업 창업 도전과 에이전시를 경험 후 현재는 인하우스에 장착했습니다. 웹·앱 UX/UI, 이커머스 구축·운영, 마테크, 애드옵스, 백 오피스, B2B SaaS를 중점적으로 폭넓은 도메인 지식을 쌓고 있는 프로덕트 디자이너입니다. |
안드로이드 UI 가이드 - andeuloideu UI gaideu
관련 게시물
저작권 © 2024 ko.paraquee Inc.
