안녕하세요. 감성 UI를 좋아하는 김성훈입니다. 일본 라인 앱 서비스인 LINE 변호사상담 프로젝트를 진행하면서 진행한 아이폰X 해상도 대응 내용 공유드립니다. 읽기 편하게 그림 많이 넣었으니 가벼운 마음으로 정독(?)해 주세요. 1. 안전영역(Safe Area)이란? Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역입니다. 보통 오래된 TV 해상도가 가진 4:3 비율 기준으로 타이틀, 자막 등이 모두 노출되게 작업을 했습니다. TV Safe Area (http://www.indefilms.net/html/title_safe_area.html) 2. 왜 아이폰X는 Safe Area가 필요할까요? 아이폰8 이하 기종과 달리 아이폰X의 디스플레이 영역은 상/하단 라운드 영역을 포함하고 있습니다….read more
이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/ UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다. 가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것이며 가변 폰트(Variable fonts)를 오픈타입 가변 폰트(OpenType Variable Fonts) 라고 부르기도 합니다. 가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을…read more
이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과 Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 아래쪽, 오른쪽에만 대응이 된다. 하지만, 모든 언어의 흐름이 위와 같지는 않다. 언어 영어 아랍어 일본어 몽골어 writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl direction LTR RTL X X 그림 기타 horizontal-tb, LTR도 가능하다. 이렇게 모든 언어의 흐름은 각기 다르다. 하나의 언어에만 초점을 맞추어 CSS를 입히면 상관이 없지만, writing-mode나 direction이 다른 언어들을 대응해야…read more
HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 종종 불필요한 작업이 일어납니다. 예를 들면 문서의 한 곳에서 수정이 발생하더라도 이를 처리하는 브라우저는 문서 전체를 작업 범위로 간주하기 때문에 나머지 영역에 대한 불필요한 계산 작업을 합니다. 수정이 어떤 범위 내에 있어야 하는지 브라우저에 알릴 방법이 없기 때문입니다. 소개해드릴 CSS Containment Module은 웹페이지에서 선택된 하위 트리를 문서의 나머지 영역과 분리하는…read more
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 브라우저에서 제공하는 <video> 요소의 재생 버튼, 타임라인은 어떻게 생성되는 걸까요? 얼마 전 번역한 DOM 아티클 작성자가 shadow DOM을 주제로 What is the Shadow DOM? 글을 작성했습니다. 꽤 오래된 개념이지만 이번 기회에 shadow DOM에 대해 자세히 알아보고자 이 글을 번역해보았습니다. 원문에서 다루지 않는 “slot” 개념은 다른 기술 문서를 참고하여 내용 하단부에 추가하였습니다. Shadow DOM은 무엇일까? 몇 주 전에 what exactly the DOM is 라는 아티클을 작성했습니다. 요약하자면, DOM(Document Object Model)은 HTML 문서의 구조화된 표현입니다. 이것은 브라우저가 페이지에 무엇을 렌더링 할지 결정하기 위해, 혹은 자바스크립트 프로그램이 페이지의 콘텐츠 및 구조,…read more
