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

gradient를 활용하여 그래프 만들기 

Posted by in Research

gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다. 1. 디자인 흔히 볼 수 있는 막대그래프입니다. 가로로는 기준선이 길게 채워져있고 세로로는 회색 막대가 있습니다. 수치에 따라 색상이 달라지는 막대가 있습니다. 2. 마크업 기준선을 구현하는 방법으로 생각해 볼 수 있는 것은 1px 이미지를 반복 시키는 방법 DOM을 추가하여 absolute로 위치를 잡는 방법이…read more

linear-gradient로 skeleton screen 만들어보기

Posted by in Research

페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있는데요. 이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 합니다. 저도 함께 일하는 개발자를 통해서 처음 알게 되었는데, skeleton은 뼈대를 의미하는 단어네요. skeleton screen을 적용하면 사용자가 “대기중”이라는 느낌을 전달하면서 빠르게 로드되고 있다고 인식하게 합니다. 그럼 이러한 UI는 어떤 방법으로 구현할 수 있을까요? CSS의 linear-gradient 속성과 :empty 선택자를 활용하여 이를 구현해 보도록 하겠습니다. 1. linear-gradient 원리 linear-gradient의 기본 문법은 아래와 같습니다.

선형을 적용해보면, 방향과 적용 컬러를 순서대로 선언하게 됩니다. 방향 to bottom은 기본 값으로 생략이 가능합니다. linear-gradient(to bottom, yellow 20%, steelblue…read more

CSS Scroll snap points 알아보기

Posted by in Research

Safari에서만 사용할 수 있던 Scroll snap 모듈이 9월 4일 릴리즈되는 Chrome 69부터 지원합니다. 배경 Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있습니다. 스크롤링은 사용자와 웹 콘텐츠간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나 주요 콘텐츠의 일부만 보이기도 합니다. 하지만 미리 설정한 위치로 이동한다면 자연스러운 스크롤 움직임과 함께 사용자 경험은 더욱 향상될 수 있습니다. CSS Scroll snap 모듈을 사용하면 스크롤 동작을 정의하기 위한 JavaScript 사용을 줄일 수 있고, 하드웨어 가속을 사용하기 때문에 웹 브라우저에서 원활한 동작과 성능 향상을 기대할 수 있습니다. 이해 Scroll Container는…read more

flexbox로 만들 수 있는 10가지 레이아웃

Posted by in Research

기존에 사용하던 레이아웃 기법은 display, float, position으로 컬럼 레이아웃을 표현하는 데 한계가 있고 구현 방법이 복잡한 문제가 있었는데요. 마크업 개발자들이 종종 “이것은 구현이 어렵습니다.” 라고 얘기했던 이유 중 하나이기도 했습니다. flexbox 모델의 장점을 한 마디로 표현하면 “복잡한 계산 없이 박스의 크기와 순서를 유연하게 배치할 수 있다.” 라고 정리할 수 있습니다. 정렬, 방향, 순서, 사이즈 등을 유연하게 조절하기 때문에 별도의 분기 처리가 줄어들고, CSS만으로 다양한 레이아웃 구현이 가능합니다. PC는 IE10이상 대응시, 모바일에서는 Android, IOS 거의 모든 버전에서 적용이 가능합니다. (https://caniuse.com/#feat=flexbox) 기존 작업방식과 차이점을 중심으로 각 레이아웃에 대해 하나씩 살펴보도록 하겠습니다. 예제 URL : https://codepen.io/witblog/full/rrGjPx 스크롤이 없는…read more