WIT – NTS UIT Blog

아이폰X 안전영역(Safe Area) 대응 사례 공유

Posted by in Research

안녕하세요. 감성 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

Variable fonts (가변 폰트)

Posted by in Research

이미지 출처 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

CSS Logical Properties and Values

Posted by in Research

이 글의 주요 예제 및 도식은 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

CSS Containment Module

Posted by in Research

HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 종종 불필요한 작업이 일어납니다. 예를 들면 문서의 한 곳에서 수정이 발생하더라도 이를 처리하는 브라우저는 문서 전체를 작업 범위로 간주하기 때문에 나머지 영역에 대한 불필요한 계산 작업을 합니다. 수정이 어떤 범위 내에 있어야 하는지 브라우저에 알릴 방법이 없기 때문입니다. 소개해드릴 CSS Containment Module은 웹페이지에서 선택된 하위 트리를 문서의 나머지 영역과 분리하는…read more

모두가 함께 누리는! 2019 널리 세미나

Posted by in Conference

2019년 제7회 널리 세미나 모두가 함께 누리는! Make it More Accessible 모두가 함께 누릴 수 있는 다양한 기술을 기반으로 한 교육 방법들을 확인해 보고, 그 교육 속에서 모두를 위한 접근성을 높일 수 있는 방법을 함께 살펴보고자 합니다. 장소: 네이버 그린팩토리 2층 커넥트홀 일시: 2019년 6월 25일 화요일 참가신청: 5,000원(*모인 참가비는 해피빈 전액 기부합니다.) 과학기술정보통신부, NAVER, NIA 한국정보화진흥원, Google 발표주제 AI & Accessibility with Education 시간 주제 발표자 12:30~13:00 행사 등록 13:00~13:10 개회 13:10~13:50 세션1. 모두를 위한 제품 및 서비스- 구글 웹 프로덕트 및 구글 플레이의 접근성구글의 웹 기반 제품 및…read more