당신은 주제를 찾고 있습니까 “앱 디자인 사이즈 – #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌“? 다음 카테고리의 웹사이트 you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 디자인베이스 이(가) 작성한 기사에는 조회수 29,415회 및 좋아요 852개 개의 좋아요가 있습니다.
앱 디자인 사이즈 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌 – 앱 디자인 사이즈 주제에 대한 세부정보를 참조하세요
스케치 강좌 세 번째입니다. 이번에는 앱 UI 디자인을 하기 위해서 알아야 할 가장 기본적인 것을 알아볼 거예요. OS 별 아트 보드 규격입니다. 아이폰 앱, 안드로이드 앱 디자인을 하려면 사이즈 규격부터 알아야겠죠? 같은 아이폰끼리도 iPhone 8인지 iPhone XS 인지에 따라 사이즈가 다릅니다.
사실 아트보드 만드는 것보다 더 중요한 개념이 있습니다. 안드로이드와 iOS 둘다 px이라는 절대값을 사용하지않고 dp나 pt라는 상대값을 사용합니다. 이에 대한 개념을 이해하는 게 더 중요하겠죠?
안드로이드 디자인 시에 가장 중요한 DP 단위의 개념도 영상을 통해 알아봅시다.
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
*스케치 툴은 Mac OS에서 사용이 가능합니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 스케치 툴의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*BGM 사용 출처
Track: Robin Hustin x TobiMorrow – Light It Up (feat. Jex) [NCS Release]Music provided by NoCopyrightSounds.
Watch: https://youtu.be/bdE_SyHad90
Free Download / Stream: http://ncs.io/LightitupYO
——
Track: NIVIRO ft. PollyAnna – Fast Lane [NCS Release]Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO
앱 디자인 사이즈 주제에 대한 자세한 내용은 여기를 참조하세요.
앱 디자인 사이즈의 기준은? 안드로이드와 ios 그리고 노치디자인
*2022년 6월 8일 업데이트. 작업 하기 전 개발자와 기준 사이즈를 정하고 작업에 들어가는데, 앱디자인의 경우엔 ios기준으로 한번에 할건지, …
Source: null-piglet.tistory.com
Date Published: 6/3/2021
View: 2146
GUI를 위한 첫 번째, 디자인 규격 알기 | 신연석 디자이너
Interface Design, UI, UX, GUI , HCI 등 다양한 용어는 앱이나 웹을 처음 디자인하는 입문자에게는 큰 혼란을 가져온다.
Source: shinyeonseok.com
Date Published: 6/16/2021
View: 7916
[디자인팁] 웹/앱 디자인을 하면서 아무도 가르쳐 주지 않지만 …
그 중 가장 많은 사용자의 크기를 계산하면 최소로 7mm정도는 확보해야 하고 물리적으로 11-13mm정도가 적당하며 px로 나타내면 최소는 26px, 적당하게는 …
Source: chaeyeon-chaeyeon.tistory.com
Date Published: 7/22/2022
View: 4383
주제와 관련된 이미지 앱 디자인 사이즈
주제와 관련된 더 많은 사진을 참조하십시오 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 앱 디자인 사이즈
- Author: 디자인베이스
- Views: 조회수 29,415회
- Likes: 좋아요 852개
- Date Published: 2019. 6. 7.
- Video Url link: https://www.youtube.com/watch?v=OHrCLgscxfI
앱 디자인 사이즈의 기준은? 안드로이드와 ios 그리고 노치디자인
*2022년 6월 8일 업데이트
작업 하기 전 개발자와 기준 사이즈를 정하고 작업에 들어가는데, 앱디자인의 경우엔 ios기준으로 한번에 할건지, 아니면 안드로이드를 따로 작업할건지 그리고 width값은 몇부터 어떤 사이즈를 기준으로 작업하는지 먼저 정하고 작업에 들어간다. 앱디자인 시작 할 때 가장 기본적인 조건이자 필수적인 작업
안드로이드의 최소사이즈 360×640
기본 사이즈 360×800
ios 최소사이즈 (아이폰8)375×667
기본 사이즈 (아이폰 x 노치) 375×812
*아이폰X처럼 노치사이즈는? 아이폰8으로 작업해도 노치 대응 가능
Q. 왜 최소사이즈로 작업하는가?
A. 최소한의 사이즈로 작업한다면 모든 사용자들의 디바이스 크기와 버전을 최대한 수용 할 수 있기 때문
Installed Base Data Testifies to iPhone 12’s Stellar Performance
2022년 최근 자료를 살펴보려했으나 2021년 1분기가 가장 최신 리서치인것 같아서 가져왔다. 아이폰 8과 X은 사이즈가 다른데.. 카운터 포인트 리서치에서는 8과 X을 합쳐서 통계를 내서 참고만 하면 될 듯
ios의 경우 XS~12가 점유율이 과반수를 넘기 때문에 375×812이 가장 대중적인 사이즈로 생각하면 될 것 같다.
화면 사이즈는 팀 내 개발자와 상의해서 최소사이즈로 작업을 할건지
대중적으로 가장 많이 사용하고 있는 사이즈로 작업을 할건지 의논할 필요가 있다
반응형
앱디자인, 도대체 어떤 사이즈를 기준으로 작업해야 하는 거야 @
나는 왼쪽에 ios 개발자, 오른쪽에 안드로이드 개발자를 끼고 디자인을 하고있으며,
일단 기획이 끝나면, UI로 표현해내고 프로토타입 영상을 찍어 공유한다.
그리고 개발 과정에서 양쪽에서 요청이 들어올 때마다 대응을 하며 실무를 진행하고있다.
여태까지는 뉴모피즘 디자인이라 개발자분들이 버튼을 직접 그렸다면,
지금은 플랫 디자인으로 변경되었는데 버튼 사이즈가 안맞는 등 문제가 생겨 해상도부터 다시 공부하는 과정을 거치게 되었다 ㅠㅠ
해상도 기준
기준으로 할 디바이스 대지
안드로이드 = 360 * 640
ios = 375 * 667
디자인은 무조건 작은화면부터 디자인하는게 편하다!!! (진리)
큰걸 작게 하는 작업보다, 작은걸 크게 하는 작업이 훨~~씬 수월함 ㅠㅠ
그래서 나는 안드로이드 대지 사이즈에서 먼저 디자인한 후 > 우측 하단을 늘려서 ios 사이즈에 대응 하는 순서로 디자인을 한다.
디자인 순서
나는 이런 순서로 디자인한다.
1. 간격 고려하지말고 그냥! 일단! 그림그리듯 그릴것 – Flow 와 사용성이 확인
– Component와 Auto layout 신경쓰지말고,
일단 그려서 UX플로우와 버튼의 위치 등 사용상 간편한지 확인
2. 디자인 확정나면 Component와 Auto layout, Constrains를 고려하여 안드와 ios 대응 정리
(이때, 모든 화면을 싹 다 정리해주는게 아니라 레이아웃 통일되는 주요 화면만 디자인 하는데,
우측 하단 잡고 늘려서 기기 대응 되는 정도)
✔️ 버튼 자체의 크기보다 글자의 크기와 그로부터 좌우 상하 간격을 고려하는 것이 더 중요함 > Auto layout 사용
✔️ 사이 간격을 고정하고 싶은 경우 > Auto layout 내에서 그룹핑
✔️ 꼭 디바이스로부터 고정해야하는 경우는 Constraints
✔️ 개발자님들에게 마스터 컴포넌트 위치 찾는 방법 알려드리기
– Components들은 보라색 테두리이고, 눌러서 Go to master components 클릭
(간혹 master components 삭제되어있는 경우는
Restore components 하는데, 이 경우는 디자이너 거친 다음 사용하기)
GUI를 위한 첫 번째, 디자인 규격 알기
GUI를 위한 첫 번째, 디자인 규격 알기 2017년 3월 11일
사용자 인터페이스 디자인을 시작하기에 앞서 알아야할 기본 규격
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 배율로 캔버스 만들기
나는 개발 환경에 맞도록 아래와 같은 규격으로 캔버스로 설정한다.
Responsive Web : 1920(1440, 1280, 1080) x height / Tablet : 768 x height / Mobile : 320 x height iOS iPhone 6: 375 x 667 (@1x) Android Nexus 5: 360 x 640 (mdpi)
가로 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%에 가깝고 점점 늘어나는 추세다. 그 이후는 다 비슷하다.
Statcounter
그러나 처음부터 1920px으로 잡고 작업하는 것보다 1280, 1024px 처럼 낮은 해상도 기준으로 작업해서 보기 좋은 비율을 만든 이후에 좌우로 늘리는 방식을 추천한다. 처음부터 1920px으로 작업하면 스케치나 포토샵 화면에서 줄여서 보는 것과 실제 웹에 퍼블리싱된 것을 보는것의 느낌이 다를 수 있다. 많은 경험이 없는 디자이너에게는 보통 대지(Artboard) 기준으로 여백 대비 콘텐츠 영역을 잡기 때문에 실제로 1440px 같은 해상도로 보면 다소 커보이는 경향도 있다.
Android dpi와 dp
도트 퍼 인치(Dots per inch, DPI)는 인쇄와 디스플레이 해상도의 측정 단위이며, 특히 1 제곱인치 (2.54 제곱센티미터) 공간 안에 만들어진 점이나 화소의 수를 말한다.
Low density (120dpi) (0.75x): ldpi
Medium density (160dpi) (baseline) : mdpi
High density (240dpi) (1.5x) : hdpi
Extra High density (320dpi) (2x) : xhdpi
Extra Extra High density (480dpi) (3x) : xxhdpi
Extra Extra Extra High density (480dpi) (4x) : xxhdpi
DP를 계산하는 방법은 mdpi 기준으로 1px = 1dp 이다.
xxhdpi 기준으로 아이콘을 32 x 32 dp로 만들었다면 실제 px은 3배를 해서 96 x 96 px이 된다. 아래 dp를 dpi별 쉽게 계산 할 수 있도록 도와주는 사이트가 있다.
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/
iOS – http://ivomynttinen.com/blog/ios-design-guidelines / https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
Material – https://material.io/
Bootstrap – CSS – http://bootstrapk.com/css/
[디자인팁] 웹/앱 디자인을 하면서 아무도 가르쳐 주지 않지만 알아서 지켜야 하는 규칙과 상식_3편
안녕하세요~ 마지막 ‘ [디자인팁] 웹/앱 디자인을 하면서 아무도 가르쳐 주지 않지만 알아서 지켜야 하는 규칙과 상식_3편 ‘ 으로 돌아왔습니다!! 제가 지금까지 올렸던 게시물 중에서 가장 오랫동안 시리즈로 작성했던 글이었던 것 같네요ㅎㅎ
그만큼 제가 학원을 다니고 열심히 공부했다는 뜻이기도 하면서 공부를 하기 전까지는 몰랐던 점이 많았다는 뜻이기도 하고, 여러분들께서 많이 사랑해주셨다는 뜻이기도 하겠죠ㅎㅎㅎ 감사합니다!
그럼 마지막 3편 시작해보겠습니다~ 마지막까지 재미있게 봐주시고 잘못된 내용이나 질문 댓글로 남겨주세요! (이전 게시글을 보지 못하셨던 분들은 아래의 링크에서 이전 게시글부터 천천히 읽어봐주시면 감사할 것 같습니다!)
https://chaeyeon-chaeyeon.tistory.com/22
공유해드릴 디자인팁은 다음과 같습니다.
01. DP, PT, PX은 무엇이며 어떻게 구별하는 것일까?
02. mdpi, xhdpi, xxhdpi, xxxhdpi는 무엇이며 어떻게 구별하는 것일까?
03. 사이트에 들어가는 이미지의 용량크기는 몇정도가 적당할까?
04. 프로젝트를 시작할 때 가장 먼저 물어보아야 하는 질문 두가지
05. 반응형웹사이트는 어떤 버전의 브라우저부터 호환이 가능할까?
06. 모바일기기와 데스크탑의 폰트의 크기는 각각 어떻게 잡고 디자인해야 할까?
07. 폰트 16px 과 아이콘 24px이 잘 어울리는 이유는 무엇일까?
08. 버튼디자인을 할때 고려해야 하는 것
09. 영문폰트 14px과 한글폰트 14px은 크기가 달라보이는데 내가 이상한걸까?
01. DP, PT, PX은 무엇이며 어떻게 구별하는 것일까?
기본적으로 px은 무엇인지 다들 알고 계실 것이라 생각합니다. 웹에서 디자인을 할 때 사용하는 가장 작은 단위이죠.
px을 아신다면 DP와 PT도 이해하기 쉽습니다. DP와 PT는 px에서 파생한 것이고 이제부터 설명할 내용을 조금 맛보기로 알려드리면 사실 DP와 PT는 단위의 이름을 만든 회사만 다르지 같은 단위이기 때문입니다.ㅎㅎ
대체적으로 사람들이 디스플레이를 보는 거리는 50-60cm라고 합니다. 거리에 비례하여 인지한계점에 도달한 ppi는 최소 300ppi입니다.(인쇄용 디자인의 최소 dpi를 300dpi로 설정하는 이유도 그것입니다.) 2010년도에 등장한 Retina display가 326ppi였으니 고해상도라고 부를 수 있었던 것이죠.
DP와 PT를 이해하시려면 먼저 ‘ Retina display ‘에 대한 이해가 있으셔야 합니다. Retina display란 2010년도에 애플에서 제시한 액정디스플레이 기술입니다. Retina display은 망점이 보이지 않는 고해상도의 디스플레이라는 뜻인데 망점이란 스크린에서 보이는 도트, 픽셀의 값입니다. 그러니 픽셀로 이루어진 웹상에서 픽셀이 보이지 않는다면 얼마나 해상도가 높은지 감이 오시나요? (사실 요즘 디스플레이들은 모두 픽셀이 전혀 안보이는 것이 당연하긴 하죠ㅎㅎ….) 아래의 이미지를 보시면 Retina display의 고해상도에 대한 감을 잡기 조금 쉬우실 것 같습니다.
왼쪽 : Retina display 이전의 과거 디스플레이 / 오른쪽 : Retina display
Retina display로 인해 한국, 중국, 일본 등과 같은 나라들의 사용자들은 더욱 편리하게 웹을 사용할 수 있게 되었습니다. 한국, 중국, 일본 등과 같은 나라들은 글자의 획수가 많고 글자를 구성하는 획의 간격이 좁은 나라들입니다. 그래서 이런 나라들은 과거의 픽셀 크기로는 디스플레이를 볼 때 피로도가 매우 높았습니다. 하지만 Retina display의 등장으로 이런 나라들의 사용자들은 피로도가 매우 낮아졌습니다. 하지만 여기서 문제가 있었습니다. 해상도는 높아졌으나 동일한 크기인 디스플레이에 이것들을 넣으려고 하니 픽셀의 크기가 작아지게 된 것이죠. 그러니 이름은 동일하게 픽셀이지만 생각하고 있는 크기의 값이 다를 수 있게 되어버린 것입니다. (기존의 픽셀의 크기와 레티나 디스플레이로 탄생한 픽셀의 크기로) 심지어 레티나 디스플레이의 픽셀은 기존의 픽셀의 4분의 1로 줄인 크기였기 때문에 해상도는 2배나 좋아지게 된 것이라(해상도는 너비와 높이로 보는 것이기 때문에 2배가 좋아지게 된 것이다.) 더욱 혼용되면 안되는 값이었습니다. 정리하자면 기존의 1px과 레티나 디스플레이의 1px이 단어는 같지만 보이는 크기가 달라지게 된 것입니다. 그래서 이때 등장한 것이 DP와 PT입니다.
구글에서는 이런 문제점을 해결하기 위해 과거의 px을 DP라고 부르자고 하였습니다. 그렇게 하고 나니 애플사에서도 자신의 레티나 px과 과거의 px이 헷갈린다고 생각한 것입니다. 그래서 애플사에서는 과거의 px을 PT라고 부르자고 하였습니다. (두경쟁사의 치열한 자존심 싸움….٩(๑`^´๑)۶) 그래서 결론적으로 DP와 PT는 과거에 레티나 디스플레이가 등장하기 전 px의 크기로, 두 단위는 동일한 값을 말하고 있습니다. 그저 AOS작업을 할 때에는 DP라고 말하고 iOS작업을 할 때에는 PT라고 부르는 차이일 뿐입니다…..
현재의 px이라는 용어는 레티나 디스플레이에 맞추어져 과거의 px의 크기에 절반에 해당하는 값입니다. 공식으로 설명하면 1DP=1PT=2px인 셈입니다.
레티나 디스플레이가 2010년에 등장했으니 현재 2020년 시점에서는 당연히 우리는 모두 레티나 디스플레이게 맞춰진 기기들을 보고 있겠죠. 여기서 또 한가지 알 수 있는 사실은 이런 레티나 디스플레이로 인해 우리가 모바일 기기 디자인을 할 때 기기에 맞는 너비값으로 크기를 설정하고 디자인을 하여 개발하면 2분의 1로 작아보이고 그래서 우리는 2배로 작업을 해야 하는 것입니다. 그리고 사실 캔버스를 열 때 기기에 맞는 너비값으로 크기를 설정하고 디자인을 시작했다고 생각하지만 모바일 기기의 너비값의 단위를 잘보면 px이 아닌 DP나 PT로 쓰여져 있습니다!! 우리가 당연스럽게 단위가 px일 것이라고 생각하고 보았기 때문에 몰랐을 뿐이라는 거죠. (๑°ㅁ°๑)!!✧
예를 들어보면 아이폰7,8 기기의 너비가 몇이라고 알고 계신가요? 375px이라고 알고 계시지 않나요? 그래서 우리는 작업할 때 왜 2배로 작업해야 하는지도 모른 채로 포토샵 캔버스를 750px로, 2배로 열어 작업하죠. 하지만 여기서 치명적인 문제는 사실 아이폰7,8 기기의 너비는 375px이 아닌 375’pt’라는 것이죠. 그래서 우리는 괜히 2배로 작업을 하는 것이 아니라 기기에 맞게 맞는 크기로 설정하여 작업하고 있는 것입니다. 이렇게 되면 사용자는 과거의 1px, 그러니까 1DP나 1PT로 작업한 것과 같은 크기로 볼 수 있게 되면서 우리는 사실 작업을 2배의 크기로 설정하고 했으니 화질은 깨지지않고 과거보다 더 좋은 화질로 모바일 디자인을 볼 수 있는 것입니다.
한마디로 실제로 사용자가 보는 px은 논리적인 px이고 사실은 실제 px의 값을 알려면 물리적인 px의 갯수를 알아야 한다는 것입니다. 실제로 사용자가 보고 있는 것은 DP나 PT이니까요. 참 복잡하죠..? ( Ĭ ^ Ĭ )
카메라의 플래시 전구를 생각하면 더 이해하기 쉽습니다. 카메라의 플래시를 터트리기 위한 전구는 한개로 보이지만 사실 여러개의 전구가 보여 빛을 내고 있는 것 아닌가요? 그런 것처럼 큰 전구는 DP나 PT, 그 전구를 구성하는 소전구는 px이라고 생각하시면 이해하는데 더 도움이 될 것이라고 생각합니다~ (ง •̀_•́)ง
02. mdpi, xhdpi, xxhdpi, xxxhdpi는 무엇이며 어떻게 구별하는 것일까?
포토샵으로 디자인을 시작한다면 처음 프로젝트를 생성할 때 캔버스의 사이즈를 몇ppi로 설정할 것인지에 대한 팝업이 나오는데요, 여기서 ppi는 ‘ Pixels per inch ‘, 즉, 1인치에 들어가는 픽셀의 값을 의미합니다. 웹용 디자인은 대부분 72ppi로 설정하고 인쇄용 디자인은 300dpi로 설정하죠. (참고로 ppi와 dpi는 뭐가 다른지 왜 구분하는 것인지에 대해 간단히 말씀드리자면, ppi는 조금 전 말씀드린 것과 같이 1인치에 들어가는 픽셀의 값을 의미하는 단위이고 dpi는 ‘dots per inch ‘로 1인치에 들어가는 도트의 값을 의미합니다. 인치라는 크기가 같기 때문에 두가지가 거의 같다고 볼 수 있고 헷갈리기 쉽지만 다른 점이라고 한다면 측정하는 도구가 다르다는 것이겠지요. 인쇄는 도트로 그림을 그리니 ‘d’pi일 것이고 웹은 픽셀로 그림을 그리니 ‘p’pi인 셈입니다.)
이 ppi 설정은 조금 전에 설명한 DP와 PT, PX과 관련이 있습니다. 레티나 디스플레이로 단위에 대한 용어가 추가되었는데 그에 비해 그 단위로 만드는 디자인 화면에 대한 ppi는 정리가 되지 않았죠? 지금 말씀 드리려는 mdpi, xhdpi, xxhdpi, xxxhdpi가 바로 단위에 따른 디자인 ppi의 값입니다. 1DP에 1px이 들어가게 되는 디자인은 mdpi(포토샵에서 2배 작업을 하지 않은 디자인 = 72ppi), 1DP에 2px이 들어가게 되는 디자인은 xhdpi(포토샵에서 2배 작업을 한 디자인 = 326ppi), 1DP에 3px이 들어가게 되는 디자인은 xxhdpi(포토샵에서 3배 작업을 한 디자인 = 400ppi이상), 1DP에 4px이 들어가게 되는 디자인은 xxxhdpi(포토샵에서 4배 작업을 한 디자인 = 500ppi이상)가 되는 것입니다.
03. 사이트에 들어가는 이미지의 용량크기는 몇정도가 적당할까?
웹, 앱 디자인을 할 때에 사용하는 이미지에 대한 경량화 작업은 무조건 필수입니다. 사이트는 무수히 많은 페이지로 늘어날 수 있고 그렇게 되면 한가지의 사이트 안에 들어가는 이미지는 수백, 수천, 수만개가 될 수 있습니다. 그런 상황에서 예를 들어 이미지가 한개당 1mb라고 한다면 그 이미지가 만개만 되어도 그 이미지들은 사이트의 다른 요소들을 빼고 이미지의 크기만 해도 이미 9.765625GB가 됩니다.(1024kb = 1mb / 1024mb = 1gb / 1024gb =1tb) 그렇기 때문에 사이트에 사용하는 이미지의 용량은 최대한 kb가 되도록 맞춰주는 것이 좋습니다. 사용하려는 이미지의 크기가 너무 크다면 아래의 제가 첨부한 이미지 경량화 사이트에서 무료로 이미지의 크기를 줄여주시면 좋을 것 같습니다~ㅎㅎ
이미지 경량화하는 사이트 : tinypng.com/
04. 프로젝트를 시작할 때 가장 먼저 물어보아야 하는 질문 두가지
디자이너가 프로젝트를 시작할 때는 가장 먼저 물어보아야 하는 질문이 있습니다.
첫번째는 ” 디자인파일을 무슨 프로그램으로 만들어야 하나요? ” 입니다. 자체적인 서비스를 만들고 있다면 자체적으로 사내에서 사용하고 있던 프로그램으로 디자인을 하고 그 파일로 파일 관리를 하면 되지만 외주나 다른 업체의 디자인을 하는 경우라면 그 업체에서 사용하고 있는 프로그램으로 디자인을 하여 파일을 전달해야 하기 때문에 반드시 물어봐야 하는 질문입니다. (그렇지 않으면 디자인을 전부 하고 난 후 업체에서 그 프로그램으로 만든 디자인을 열 수 없다고 다른 프로그램으로 다시 만들어달라고 하는 경우가 생깁니다!! ｡･ˇ_ˇ･｡)
두번째는 ” 인터넷 익스플로러 몇 버전부터 대응하는 프로젝트인가요? ” 입니다. 저번 1편에서 말씀드렸다 싶이 인터넷 익스플로러의 치명적인 업데이트 문제점으로 인터넷 익스플로러 몇버전부터 대응하는 프로젝트인지를 알아야 디자인을 얼마나 할 것인지 어떠한 기능을 사용할 수 있는지 판단할 수 있습니다. 예를 들어 파일 확장자 중 SVG 파일확장자와 같은 경우는 인터넷 익스플로러9버전부터 사용 가능하기 때문에 이전 버전의 인터넷 익스플로러버전부터 대응하는 프로젝트라면 SVG 파일확장자를 사용할 수 없습니다. (인터넷 익스플로러 9버전의 이전 버전이 탄생했을 때 SVG 파일확장자가 등장하지 않았기 때문에 사용이 불가능합니다.)
인터넷 익스플로러의 업데이트 문제점에 대해 알고 싶으시다면 아래의 링크에서 확인해보세요!ㅎㅎ
https://chaeyeon-chaeyeon.tistory.com/21
05. 반응형웹사이트는 어떤 버전의 브라우저부터 호환이 가능할까?
반응형 웹사이트는 전세계 5대 브라우저에서 거의 모두 사용할 수 있지만 우리의 문제인 인터넷 익스플로러는 9버전부터 대응합니다. 그래서 조금 전 설명한 이야기를 약간 응용하면 반응형 웹사이트는 무조건 SVG 파일확장자를 사용할 수 있다는 것을 알 수 있겠네요~
06. 모바일기기와 데스크탑의 폰트의 크기는 각각 어떻게 잡고 디자인해야 할까?
모바일기기와 데스크탑의 폰트 크기는 달라지지 않습니다. 폰트의 크기는 사용자가 글자를 보는 거리에 따라 결정이 되는데(인쇄용디자인의 폰트의 크기가 보는 거리에 맞춰져 기본 크기를 12pt로 설정하는 것처럼요.) 모바일과 데스크탑은 기기의 물리적인 크기가 달라지는 것이지 디바이스를 사용하는 사용자와의 거리가 달라지는 것이 아니기 때문에 모바일, 데스크탑, 노트북의 폰트 크기는 모두 동일합니다.
07. 폰트 16px 과 아이콘 24px이 잘 어울리는 이유는 무엇일까?
폰트 16px에는 아이콘은 24px이 가장 잘 어울린다고 저번 게시물에서 아이콘 사이즈를 설명드리며 말씀 드린 적이 있습니다. 그때 다른 설명 없이 잘 어울리니 사용하시면 좋을 것 같다고 말씀드려서 조금 의아해 하셨을 수도 있을 것 같아 이번 게시물에서 덧붙입니다. 아이콘을 만드는 방법에 대해 설명드릴 때 아이콘은 24px이라고 해도 실제 아이콘이 그려지는 영역은 그렇지 않다고 말씀드렸던 것 기억하시나요? 아이콘 24px의 실제 아이콘이 그려지는 캔버스 영역은 20px입니다. 또한, 대부분 아이콘을 20px에 꽉 채워서 그리지 않기 때문에 어느정도 1-2px정도의 여백이 있기 마련입니다. 그렇게 되면 어느정도 실제 보이는 아이콘의 높이 값이 16px정도로 비슷한 크기를 가지게 되기 때문에 폰트 16px과 같이 배치하였을 때 자연스럽게 어울리게 되는 것입니다.
아이콘의 사이즈를 정하는 방법에 대한 설명이 기억이 안나시거나 게시물을 본 적이 없으신 분은 아래의 링크에서 확인해보세요~!
https://chaeyeon-chaeyeon.tistory.com/22
08. 버튼디자인을 할때 고려해야 하는 것
버튼디자인을 할 때에는 고려해야 하는 사항이 있습니다. 바로 ‘ 터치포인트 ‘ 라는 것인데요. 이것은 모바일 기기에 적용되는 용어입니다. 데스크탑에서는 클릭을 하는 도구가 ‘커서(cursor)’로 거의 디스플레이상의 1-2px까지도 클릭이 가능한 정밀한 포인터이지만 모바일상에서는 ‘커서(cursor)’가 아닌 손가락으로 클릭을 하게 됩니다. 손가락은 사람마다 크기도 다르고 나이대에 따라서도 매우 다양합니다. 그 중 가장 많은 사용자의 크기를 계산하면 최소로 7mm정도는 확보해야 하고 물리적으로 11-13mm정도가 적당하며 px로 나타내면 최소는 26px, 적당하게는 42-49px정도가 좋다고 합니다. 애플과 구글에서는 최소 모바일 터치포인트 크기를 정해주고 있습니다. 애플은 44PT로, 구글은 48DP로 추천하고 있습니다.
09. 영문폰트 14px과 한글폰트 14px은 크기가 달라보이는데 내가 이상한걸까?
영문폰트와 한글폰트, 이 두가지는 엄연히 다른 스타일의 폰트입니다. 다른 스타일과 가이드를 가지고 만들어진 두가지의 폰트를 같은 크기로 하여 같이 붙여두었다고 해서 실제로 보이기에도 같은 크기가 되는 것은 아닙니다. 특히나 영문폰트와 한글폰트와 같은 경우에는 사용하는 언어가 다르기 때문에 영문폰트보다 한글폰트가 1-2px정도 큰 경우가 많습니다. 조금의 오차도 없이 정확하게 디자인을 하고 싶다면 디자인을 할 때에도 영문폰트를 한글폰트보다 1-2px정도 크게 하거나 한글폰트를 영문폰트보다 1-2px정도 작게 잡고 디자인하면 됩니다. 개발자에게 파일을 전달 할 때에도 디자인할 때 설정했던 규칙을 알려주어 개발상에서도 디자인과 같은 크기로 영문폰트와 한글폰트가 보일 수 있도록 해주면 좋을 것 같습니다.
http://www.idsc.kr/bbs/board.php?bo_table=news&wr_id=96&sca=%EB%94%94%EC%9E%90%EC%9D%B8%EB%89%B4%EC%8A%A4&page=5
끝까지 봐주셔서 감사합니다! 🙂
[앱 디자인] 디자인 가이드 만들기 – 아이폰
반응형
*아이폰 앱 가이드 작업의 특징
이미지 출처: http://protosketch.io/exporting-assets-for-ios-ipads-and-iphones/
XCode 에서의 작업 화면
만약 750 기준으로 작업을 해서 드리면 1/2 값을 저기에 입력하는 식으로 작업합니다
*좌표
절대적인 건 아니고.. 대략 저런 기준으로 잡아서 작업하시면 됩니다 ^^
아이폰은 절대 좌표 로 작업합니다. 그러니까 상단 Status Bar 밑에 0,0 찍어놓은 저 곳을 기준으로 절대 좌표를 계산해서 가이드를 만들면 개발자가 그곳을 기준으로 위치를 계산해 넣습니다. 이것도 개발자마다 다를 수 있으니 작업 전에 좌표 기준을 어디로 할지 한번 확인해 보시는 게 좋을 것 같구요.
*색상값
*이미지 작업
아이프렌즈펫의 경우는 처음에는 750, 1242 두 버전을 다 만들고 있었는데 나중에 협의하에 750 하나만으로 이미지 작업을 했습니다. 750에서 작업한 아이콘이 1242에서 자동적으로 위치를 잡는데 크게 문제가 없어서요. 화면에 아이콘 등을 제외한 이미지 요소가 많지 않아서 ^^;; 가능했습니다. 팀마다 상황이 다르실테니 맞는 방향으로 하시면 될 것 같습니다.
※팁
그밖에 고려할 점…
협업은 정말 어려워요~
글자 수에 따라 달라진 스냅 높이 가이드
*아이프렌즈펫 디자인 가이드 화면 결과물
아이프렌즈펫처럼 비어보이고 허여멀건한 화면에도 나름 계산할게 많다는걸 볼 수있는 화면입니다. on_
공유하기 글 요소
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로,이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다.아이폰 해상도를 먼저 보면위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다.아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다.여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에, 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적로 크기를 계산한 작업물을 드렸습니다.아이프렌즈펫의 경우 아이폰은 750 하나만으로 작업하고, 그 외에는 자동으로 이미지 사이즈나 위치가 조정되는 방향으로 했습니다. 아마 이건 앱마다 상황이 다를 건데, 고객이나 팀과 협의한 방향으로 하시면 됩니다.RGB(000,000,000) 값을 주로 사용합니다. 가이드에 이 값을 표기해주세요.수치값 계산 작업을 했다면 아이콘 등등을 잘라서로 공유합니다.이건 당연히 해상도별로 아이콘을 오려야 하는데요… 수치값은 750 기준으로 했다 하더라도 1242 등 다른 해상도 기준으로도 아이콘을 잘라드려야 합니다.따라서 당연히 이미지는 Vector 아이콘으로 작업하셔야합니다 ^ㅁ^ Ctrl + I 눌러서 해상도 크기 늘리시면 되구요 ^ㅁ^ (디자인 경력 1개월 미만을 위한 충고 ㅋ )단순한 사각형 버튼의 경우 코딩으로 작업이 가능하지만 특별한 모양의 버튼의 경우 이미지를 잘라드려야 하는데요, 버튼을 자를 때는 기본적으로 세 가지 상태에 대해서 만들어 주셔야 합니다. (경우에 따라 한두가지 필요없는 게 있을 수 있구요)아이폰 이미지는 해상도에 따라 자동으로 늘어나거나 위치가 잡히는데 이 과정에서 정사각형이 아닌 이미지는 찌그러질 수가 있습니다ㅠ 정사각형으로 자르는게 가능한 이미지는 웬만하면 패딩을 넣어서라도 정사각형으로 작업합니다.공통으로 사용하는 아이콘인데 이미지가 작아 용량이 크지 않은 아이콘의 경우, 퍼포먼스에 크게 문제되지 않기 때문에 가장 큰 화면 사이즈에 맞게 아이콘을 잘라서 작은 화면에서도 공통으로 사용해도 됩니다.제가 가장 부족한 부분인데요, 화면을 움직였을 때, 텍스트가 단 한 줄일 때 등 인터랙션 후의 화면 모습도 생각해서 어느정도 가이드를 첨부해주시는 게 좋습니다.디자이너가 원하는 바를 가능한 한 세세하고 디테일하게 잡아주지 않는다면 상상 밖의 결과물이 나올수 있습니다 ^ㅁ^;;;폰트는 ABC, 이미지는 123 이런식으로 아이콘을 붙여서 만들었습니다.디자인 가이드 만들기 – 안드로이드 편 보러가기 > http://devstory.ibksplatform.com/2017/09/blog-post_25.html 디자인 가이드 작업에 유용한 툴 + 소개 보러가기 > http://devstory.ibksplatform.com/2017/09/blog-post_63.html 아이폰디자인가이드(1) http://leipiel.tistory.com/11 아이폰디자인가이드(2) http://leipiel.tistory.com/12
앱 아이콘 사이즈는요? _ UX 디자인과 개발
앱 페이지 디자인만큼 중요한 비중을 차지하는 부분이 앱 아이콘 디자인이죠. 앱 아이콘은 로고를 주로 이용합니다. 아이콘 가이드에 맞춰 제작하고 개발자에게 파일을 넘겨주면 되는데 정확한 사이즈를 알지 못하고, 파일 관리를 어떻게 해야 할지 모를 때, 유용하게 쓸 수 있는 사이트 하나를 소개합니다.
토스터기에 아이콘 이미지를 넣으면 앱을 개발할 때 필요한 이미지로 리사이징해주는 사이트(클릭)입니다. 토스터에 이미지가 들어가고 구워지는 UI가 완성도 있진 않지만 꽤나 귀여운 UI로, 개발자가 디자이너에게 아이콘 이미지를 받아 이용하기도 하거나 디자이너가 아예 이미지 리사이징, 폴더 정리를 해서 개발자에게 넘겨줄 때 수월하도록 도와줍니다.
이용방법은 간단합니다.
설명을 위해 간단하게 그린 이미지입니다
1. 1024 사이즈의 앱 아이콘 만들기
1024 픽셀 크기의 앱 아이콘을 만듭니다. 기본 아이콘 그리드 안에 적당한 간격과 위치, 정렬을 맞춰주세요.
2. 웹사이트에 아이콘 파일 첨부 – 로딩
png(뒷 배경 투명 이용), jpg 형식의 이미지를 선택하면 토스터기에서 구워집니다.
3. 이름과 분야 등 작성(작성하지 않고 건너뛰기 가능)
해당 아이콘의 이름, 분야 등을 작성할 수 있습니다.
– 별도로 적지 않는다면 첨부 파일 이름으로 파일, 폴더 이름 생성
3. 완료된 파일 미리보기
ios, Android 환경에서 적용됐을 때, 어떤 식으로 나오는지 미리 확인할 수 있습니다.
– 배경을 투명으로 설정(png 파일)해 ios에서는 기본 회색 배경으로, 안드로이드에서는 투명 설정이 적용됐습니다.
4. 파일 다운로드하기
다시 상단으로 올라가 이메일을 작성하면 메일로 zip 파일이 도착한 것을 볼 수 있습니다.
– 네이버의 경우 스팸으로 들어가는 경우도 있으니 유의
– 애플 워치, 뉴스레터를 받지 않길 원할 경우 이메일 작성 아래 두 개의 체크 박스를 해제하세요.
5. 파일 확인 및 전달
첨부 파일을 받아 압축을 해제하면 다양한 OS에 맞춰 사이즈가 정리된 것을 확인할 수 있습니다. 해당 OS 개발자에게 폴더를 넘기면 끝!
ps. 앱 아이콘 디자인, 그리드를 잘 맞춰 디자인해야 하는 이유
안드로이드의 경우 환경(디바이스 차이 등)과 업데이트에 따라 앱 아이콘이 원형, 사각형, 라운딩의 차이가 생길 수 있습니다. 이때 그리드를 잘 맞춰 디자인한다면 중심과 상화좌우 여백이 자동으로 조절되지만 그리드에 벗어나서 디자인한다면 상하좌우 여백이 불균형하고, 로고(아이콘)만 꽉 차게 보일 수 있습니다. 개발 단계에서 별도의 조절이 가능하지만 개발자와 한번 더 작업을 해야 하는 부분으로, 그리드에 맞춰 작업해서 한 번에 적용하는 깔끔한 작업이 될 수 있습니다.
Favorite
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지 뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
Tags
[앱 디자인] 디자인 가이드 만들기
NCP 에서 신규 서버를 생성하면 AWS 와는 다르게 root 계정과 패스워드를 발급해 줍니다. 해당 계정정보를 잘 보관한 후 실제 사용할 계정을 생성해서 서버를 관리하게 됩니다. 1. 우선 ubunbu 에서 신규 계정을 생성 합니다. # adduser namsan cs namsan 이라는 계정을 생성하고 패스워드를 설정하였습니다. 2. 신규 생성된 계정으로 전환 후 명령어를 실행해 봅니다. su 명령어를 통해 신규 생성 계정으로 전환 합니다. # su namsan cs sudo 명령어를 실행해 보겠습니다. # sudo date cs “namsan is not in the sudoers file. This incident will be reported.” cs sudoers file 에 해당계정이 포함 되어있지 않다는 메시지가 출력됩니다. /etc/sudoers 에 신규 계정이 추가 되어 있지 않아 표출되는 에러 메시지 입니다. 다시 root 계정으로 전환하여 sudoers 파일을 수정해보겠습니다. su 명령어를 통해 다시 root 계정으로 전환 합니다. # su root cs 3. vi 명령어를 통해 /etc/sudoers 파일을 편집합니다. # vi /etc/sudoers cs # User privilege specification 항목에 아래와 같이 신규 생성된 계정 정보를 추가합니다. root ALL=(ALL:ALL) ALL namsan ALL=(ALL:ALL) ALL cs 이제 신규 생성된 사용자로 전환하여 sudo 명령어 실행 시 정상적으로 작동하는 것을 확인 할 수 있습니다.
키워드에 대한 정보 앱 디자인 사이즈
다음은 Bing에서 앱 디자인 사이즈 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌
- 스케치
- 스케치툴
- ui디자인
- ui디자이너
- 스케치사용방법
- GUI디자인
- GUI Design
- ui Design
- 웹디자인
- 앱디자인
- 디자인
- 웹디자이너
- 앱디자이너
- ui디자인하는방법
- sketch툴
- sketch
- 스케치앱디자인
- 스케치웹디자인
- 디자인강좌
- 앱디자인 강좌
- 웹 디자인강좌
- Sketch Tool
- 스케치디자인강좌
- 스케치강좌
- 앱디자인스터디
- 웹디자인스터디
- 앱ui디자인
- 앱 디자인 가이드
- dp
- dpi
- dp 단위
- 앱 gui
- 앱 ui
- 아이폰 앱 디자인
- 안드로이드
- 안드로이드 디자인
- 앱 gui 디자인
- 앱 가이드라인
- 앱 디자인 사이즈
- 앱디자인 기초
- uxui
- ux ui 강의
- ux ui 디자인
- ux ui 디자이너
- ux ui 디자인 강의
- 안드로이드 dp
#3 #앱 #UI #디자인의 #시작, #OS #별 #해상도 #및 #안드로이드 #DP #단위 #- #스케치 #강좌
YouTube에서 앱 디자인 사이즈 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌 | 앱 디자인 사이즈, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.