1. 해상도 개념과 사용목적현재 내가 사용하고 있는 모니터의 해상도는 1920×1080. Show 여기서 단위는 픽셀(px)이고 1920 width, 1080은 height이다. 픽셀은 가변 값이기 때문에 해상도에 따라서 크기가 달라진다. 같은 15인치를 쓰더라도 어떤 사용자는 나와 같은 1920×1080일 것이고, 어떤 사용자는 다른 해상도일 수도 있을 것이다. 2. 디바이스 최소 해상도 선정하기우리가 디자인을 하고 퍼블리싱을 하게 되면 데스크탑, 태블릿(패드), 스마트폰(모바일)에 따라 해상도가 달라지는데 그에 맞춰서 우리는 분기점을 잡아야한다. 이름하여 브레이크포인트(Breakpoints). 기기 대응을 할 시에는 최소 값을 잡는게 중요하다. 모바일의 최저값, 태블릿기기의 최저값, 테스크탑의 최저값 다 다를것이다. 기기가 모두 다르기 때문에. 스마트폰도 삼성, 애플, 샤오미 등 다양하지 않은가. 또 그 삼성, 애플 등 안에서도 또 시리즈마다 해상도가 달라진다. 보통 모바일은 320px, 태블릿은 600px, 데스크탑은 1024px로 시안을 잡는다. 우리 회사에서는 height는 따로 잡지 않지만 최소값(Min)으로 모바일 - 320×568 / 태블릿 - 600×960 / 데스트탑 - 1024×768을 잡으면 된다. 최대값(Max)은 모바일 - 414×896 / 태블릿 - 1024×768 / 데스크탑 - 1920×1080으로 잡는다. 👇참고 사이트👇 스마트폰 해상도, 화면비율 스마트폰 해상도, 화면비율 - 제타위키 9:16 1440 × 2560(갤6, 갤7, 갤노4, 갤노5, G3, G4, G5, 픽셀XL)1080 × 1920(갤4, 갤5, 갤노3, 옵G프로, G2, 넥5, 아이폰6, 픽셀) zetawiki.com 근데 네이버 보니까 1130px이던데..왜 1130로 잡은지 모르겠다(?) 최근들어 1440px도 많이 쓰는거 같던데..흠 아직까진 회사에서도 보통 주변 지인들이 쓰는 해상도도 1920를 제일 많이 봤다. 3. 최소 해상도를 선정 해야 하는 이유같은 15인치라 하더라도 1920px 사용자가 자신의 해상도로 사이트를 만들게 되면 1024px 사용자가 봤을때는 사이트에서 스크롤이 생기는 문제점이 발생한다. 만약, 1000px의 사이트를 만들게 되면 스크롤이 생겨서 가려지는 것 없이 1024px부터 ~ 1920px까지 좌우 여백이 생기고 여백의 넓이 차이만 있을 뿐이다. 그러나..! 실제 1024px 사용자는 현재 매우 적은 인원이다. 이제는 거의 없는 정도,, (하지만 아이패드 프로는 1024px인데..?!) 1920px 사용자가 훨씬 더 많은게 현실이다. (또 하지만 우리 회사에서는 1024px까지도 맞춘다,, 아이패드 프로가 1024px이기도 하고) 아마 이건 회사마다 다르지 않을까 싶다 나는 포트폴리오 만들때도 거의 모든 해상도의 맞춰서 퍼블리싱을 했었다..매우 힘들었음 나는 이미 현업에서 웹디자인+반응형 웹퍼블리싱을 하고 있어서 이는 이미 알고 있는 사실이다. 하지만 강의를 들음으로써 한 번 더 제대로 배운다 생각하고 들으니 좋은 거 같다. 참고 : 리메인 UXUI 디자인 패키지 강의 이메일 디자인에 있어서 모바일에 대한 고려는 선택이 아니라 필수입니다. 몇 가지 원칙을 지키면 모바일 친화적인 이메일을 디자인할 수 있습니다. 반응형 디자인?웹페이지를 디자인 할 때 다양한 화면 크기에 대응하기 위해 반응형 다지인을 적용합니다. 반응형 디자인의 핵심은 CSS의 미디어 쿼리(media query)입니다. 미디어 쿼리를 사용하면 화면 크기에 따라 어떤 요소를 표시하거나 숨길 수 있고, 스타일을 바꿀 수 있습니다.  출처: Wikipedia Commons 하지만 이메일을 디자인할 때 미디어 쿼리를 사용하는 것은 바람직하지 않습니다. 미디어 쿼리를 지원하지 않는 이메일 클라이언트가 있기 때문입니다. 모바일 친화적인 이메일 디자인은, 반응형은 아니지만 모바일의 작은 화면 크기에서도 좋은 가독성을 유지할 수 있는 디자인을 의미합니다. 모바일 친화적인 이메일 디자인 원칙
모바일 친화적인 이메일을 위해서는 콘텐츠를 단순화하는 노력도 필요합니다. 디자인 이전에 콘텐츠를 모으고 정리하는 일이 필요한데 이 과정을 거치다 보면 디자인도 복잡해지곤 합니다. 가능한 적은 양의 콘텐츠를 담고, 전달한 콘텐츠가 많다면 여러 개의 뉴스레터로 나누어 일정 기간 동안 발송하는 것이 좋습니다. charity: water 사례charty: water는 모바일 친화적인 이메일 디자인의 좋은 사례입니다. 1단 레이아웃을 사용하고 가로 크기를 상대값으로 지정하고, 글자와 CTA 버튼을 충분히 크게 했습니다. 모바일에서도 데스크톱과 거의 동일한 디자인을 보여줍니다. 아쉬운 것이 있다면 CTA 버튼을 선택하려면 스크롤을 해야한다는 것입니다. CTA 버튼을 상단에 배치하면 더 많은 클릭을 유도할 수 있을 것입니다. 참고 매주 수요일, 당신의 뉴스레터를 변화시키는 이야기를 받아보세요. |
모바일 시안 사이즈 - mobail sian saijeu
관련 게시물
저작권 © 2024 ihoctot Inc.
