WIT – NTS UIT Blog

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

Posted by in Research

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 검색창은 fade-out,…read more

웹폰트 사용하기 (웹폰트 101)

Posted by in Research

1. 웹폰트란? 웹 폰트는, 방문자의 로컬 컴퓨터에 서비스 제공자가 원하는 서체가 없을 경우, 온라인의 특정 서버에 위치한 서체 파일을 내려받아 화면에 표현할 수 있도록 해주는 웹 전용 서체입니다. 이 새로운 CSS3 규약을 사용하면 원하는 서체 스타일시트의 @font-face에 등록하고, font-family 속성을 통해 문서 안에서 자유롭게 사용할 수 있습니다. 2. 웹폰트를 사용하기 위해 알아야하는 속성 2-1. @font-face 기본 규칙

위의 코드는 웹폰트를 사용하는 기본적인 방법이며, NanumGothic체를 웹폰트로 사용하기 위한 예제입니다. 2-2. @font-face 속성 설명 font-family : CSS 문서에서 사용할 서체 이름입니다. src: src를 통해 로컬 컴퓨터에 설치 된 서체의 경로를…read more