이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/ UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다. 가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 더보기…
이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과 Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 아래쪽, 오른쪽에만 대응이 된다. 하지만, 모든 언어의 흐름이 위와 같지는 더보기…
HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 종종 불필요한 작업이 일어납니다. 예를 들면 문서의 한 곳에서 수정이 더보기…
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 브라우저에서 제공하는 <video> 요소의 재생 버튼, 타임라인은 어떻게 생성되는 걸까요? 얼마 전 번역한 DOM 아티클 작성자가 shadow DOM을 주제로 What is the Shadow DOM? 글을 작성했습니다. 꽤 오래된 개념이지만 이번 기회에 shadow DOM에 대해 자세히 알아보고자 이 글을 번역해보았습니다. 원문에서 다루지 않는 “slot” 개념은 다른 기술 문서를 더보기…
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 Ire Aderinokun이 작성한 What, exactly, is the DOM? 문서를 번역해 보았습니다. DOM은 정확히 무엇일까? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 더보기…
2019년 1월 29일 정식 릴리즈 된 Chrome 72, Firefox 65 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다. 📌 Chrome 72 🔔 New Feature [JavaScript] Intl.ListFormat [JavaScript] Public class fields [JavaScript] User Activation Query API [JavaScript] Well-formed JSON.stringify 🔕 Remove Feature [JavaScript] Deprecate PaymentAddress.languageCode [JavaScript] Don’t allow popups during page unload Intl.ListFormat New 더보기…
최고의 교육 + 네이버 서비스 관련 실무 경험 + 정규직 입사의 기회 HTML, CSS, JavaScript 등 UI개발 관련 실무 중심의 교육을 받을 수 있으며, 실제 네이버 서비스에 적용되는 UI개발 경험을 쌓을 수 있습니다. 또한, 인턴과정에서 우수한 성적을 거두는 분에게는 정규직 입사의 기회가 부여되며, 네이버, 라인서비스의 UI개발(HTML+CSS)을 하게 됩니다. [전형 절차] 더보기…
gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다. 1. 디자인 더보기…
2018년 12월 4일 정식 릴리즈 예정인 Chrome 71 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다. 🔔 New Feature [CSS] ‘left’ and ‘right’ values for the ‘text-underline-position’ property [CSS] :host, :host-context, and ::slotted specificity [Graphics] Animation Worklet [Graphics] COLR/CPAL font support [CSS] CSS gradient color stop double-position syntax [JavaScript] importScripts() [JavaScript] 더보기…
페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있는데요. 이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 합니다. 저도 함께 일하는 개발자를 통해서 처음 알게 되었는데, skeleton은 뼈대를 의미하는 단어네요. skeleton screen을 적용하면 사용자가 “대기중”이라는 느낌을 전달하면서 빠르게 로드되고 있다고 인식하게 합니다. 그럼 이러한 UI는 어떤 방법으로 더보기…