Category: frontend 개발 이야기

프론트엔드 개발에 관련된 다양한 주제에 대해 이야기하기

07
4월
2020

UA가 가고 Client Hints가 온다

navigator.userAgent는 브라우저 환경 별로 다른 화면과 기능을 제공하려고 할 때 유용한 웹브라우저 내장 객체입니다. navigator라는 이름에서 보이듯 1990년대 넷스케이프 웹브라우저 시절부터 2020년 현재에 이르기까지 클라이언트 환경을 분석하기 위해 많이 사용되고 있지만, 이 객체는 곧 사용하지 못하게 될 예정입니다. https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/ 구글이 자사의 Chrome 브라우저에서 User Agent 문자열을 단계적으로 사용 중단할 계획을 발표하고 대안으로 Client hints 를 제안했습니다. 이는 사용자 개인정보를 보호하기 위해 추진하고 있는 프라이버시 샌드박스 정책 중 하나입니다. Client hints는 W3C 표준은 아니며, W3C 표준 트랙에도 없는 내용입니다. Web platform Incubator Community Group(WICG)에서 발표한 제안일 뿐, 앞으로 변경될 가능성도 있습니다. 현재 Accept-CH 헤더로 크롬과 파이어폭스에서...

19
2월
2020

모바일 Dark mode 대응

Dark mode는 UI 트렌드 중의 하나이며 UI 전체를 어두운 톤으로 설정하는 기능을 말합니다. 이전에도 앱 자체의 설정을 통해 “밝은 테마, 어두운 테마”를 지원하는 경우는 있었지만, 당연히 해당 앱에서만 적용될 뿐 다른 앱에 이 설정이 공유되지 않습니다. 하지만, Dark mode는 OS의 자체 설정이며 OS, 모든 앱과 서비스가 이 설정을 공유하여 UI 색상을 변경시킴으로 디바이스의 사용자 경험 자체를 어두운 색상 위주로 일관되게 전환시키는 것을 말합니다. 현재 가장 많이 쓰이는 OS인 Windows 10, macOS 10.14 mojave, 그리고 모바일에서는 iOS 13 (2019.09 발표), Android 10 (2019.09.03 발표) 에서 Dark mode를 지원하고 있습니다. 모바일의 경우 마치 약속한 듯 비슷한 시기에...

31
12월
2019

내맘대로 돌아보는 2019 Frontend 트렌드

오랫동안 프론트엔드 쪽의 일을 해왔지만, 이 분야는 새로운 것들이 등장하는 속도가 정말 빠름을 느끼고 있습니다. 어느덧 한해를 정리하고 다음 해를 준비하는 연말이 왔는데요, 나름대로 2019년에 프론트엔드 분야에서 화제가 되었던 것들을 돌아보고, 관심있는 분야와 공부해야 할 것들을 개인적으로 정리해봤습니다. 자세한 설명은 구글링으로 훨씬 좋은 자료를 찾을 수 있기 때문에 이론 설명보다는 개인적인 의견을 좀 더 담아봤습니다. 함수형 프로그래밍 현재의 프로그래밍 패러다임은 절차형에서 객체지향형, 객체지향형에서 함수형으로 이동하고 있는데요, 올해엔 유난히 함수형 프로그래밍 (Functional Programming, FP) 도입에 대한 논의가 많았던 것 같습니다. 함수형 프로그래밍은 기존의 절차형 / 객체지향형 프로그래밍과 다른 사고방식으로 문제를 해결합니다. 간단하게 정리하자면 어떤 문제를 해결할...

25
4월
2019

VS CODE extension for FE

전통적으로 Javascript 개발 환경은 java처럼 복잡한 IDE 대신에 매우 가벼운 에디터로도 충분했습니다. 하지만 현대에는 frontend 개발의 주축이 되면서 매우 복잡해졌기 때문인지 Webstorm과 같은 강력한 IDE로 개발하는 경우도 많아졌습니다. 개발자에 따라 자바스크립트의 개발환경은 새롭고 강력한 IDE를 사용하는 환경, 전통적인 간단한 에디터를 그대로 사용하는 환경… 이렇게 두 분류로 나눠져 있다고 생각하는데요, 물론 이것은 개발 상황, 조직의 상황, 그리고 개인의 취향으로 어떤 것이든 선택할 수 있죠. Webstorm이 IDE계의 왕좌에 있다고 한다면, Visual Studio Code(줄여서 vscode)는 가벼운 에디터를 선호하는 개발자에게 있어 끝판왕이라고 해도 과언이 아니라고 생각합니다. microsoft에서 개발하고 있으며, Update log에 소개되는 추가 기능을 따라가기 힘들 정도로 업데이트가 활발한...

04
4월
2019

HTTP/3 (HTTP-over-QUIC)

QUIC은 Quick UDP Internet Connections 의 약자이며, 전송계층 프로토콜인 UDP 를 기반으로 TCP + TLS + HTTP 의 기능을 모두 구현하는 프로토콜입니다. QUIC 은 “quick”과 동일하게 “퀵”으로 발음합니다. Google에서 2012년에 최초로 개발했는데, 여담이지만 구글에서 개발했던 SPDY 기술이 HTTP/2의 기반 기술이었는데 역시 구글에서 개발한 QUIC이 HTTP/3의 기반 기술이 되었습니다. gQUIC vs QUIC-over-HTTP 현재는 IETF의 quicwg에서 관리하는 QUIC-over-HTTP 와 구글에서 자체 개발한 gQUIC이 분리되어 있습니다. 구글의 gQUIC에서 사용하는 암호화 기술은 TLS 1.3이 아닌 자체 암호화 기술이라는 점이 다른데요, IETF에서 표준화 작업이 진행되는 동안 구글에서도 IETF의 세부 명세를 받아들여 gQUIC을 발전시키고 있습니다. QUIC-over-HTTP to HTTP/3 HTTP/1.1은 1999년에 발표되고,...

18
2월
2009

웹사이트 최적화 : 8bit PNG 활용하기

21세기가 시작된 지 거의 10년이 다 되어가는 2009년에 이르러 네트워크와 인터넷은 놀라운 발전을 이뤄왔습니다. 웹브라우저 시장은 MS의 Internet Explorer가 독점하는 상황을 벗어나서, 지금은 파이어폭스, 사파리, 오페라, 크롬, … 기타 등등 수많은 브라우저가 서로 웹표준을 향해 경쟁하는 행복한(?) 시대가 되었지요. 하지만, 이런 상황에서도 웹브라우저가 공식적으로 지원하는 이미지 형식은 아직까지는 GIF, JPG, PNG 세 가지 뿐입니다. (BMP는 논외) 그 중에서 가장 돋보이는 포맷은 바로 PNG 인데요… 하지만, 이전에 작성했던 나를 미치게 하는 PNG 라는 포스트에서도 밝혔듯이.. IE6 의 점유율이 10% 이하로 떨어지지 않는 한, PNG의 혜택을 누리기에는 무리가 있습니다. 이런 상황에서 갑자기 8bit PNG 를 활용하자니… 이게 무슨...

07
3월
2008

Internet Explorer 8 Beta1 의 등장

미국 라스베가스에서 현지시간 3월 5일~7일 일정으로 진행되고 있는 MIX08 Conference 에서 Internet Explorer 8 Beta1 버전이 발표되었습니다. 이전 기능을 통합하는 새로운 기능, 웹표준을 지원하는 새로운 렌더링 엔진이 큰 특징이라고 할 수 있습니다. 최근 IE8 에 대한 소식이 잦다는 느낌이 들었는데, MIX08 컨퍼런스를 통해 Beta1 버전을 일반 사용자도 다운받아서 사용해볼 수 있도록 제공하고 있네요.이번 버전은 개발자와 디자이너들을 위한 Beta1 버전으로, 일반인들까지 대상으로 하는 Beta2 버전은 여름 쯤에 제공하겠다고 밝혔답니다. 개발자와 디자이너들에게는 이번 Beta1 버전을 통해 미리 IE8 이 정식으로 발표될 때를 준비하라는(?) 메세지를 주고 있는 것 같습니다. ^^;; 아직까지는 기존의 IE7 과 거의 비슷한 인터페이스를 보여주고...

07
9월
2007

UI개발의 역할론

UI개발자의 역할은 제가 생각하기로는 좁은 의미, 그리고 넓은 의미가 있다고 봅니다. 우선 좁은 의미로 보면, UI개발자의 주 업무는 디자이너가 디자인한 사이트를 구조화 하고 HTML과 CSS를 사용하여 실제로 사용자가 보는 화면을 제작하는 것입니다. 그 과정에서 디자이너와 프로그래머 사이의 의견을 조율하고 협상(?)을 하고, 각각의 브라우저에서 같은 디자인으로 보일 수 있도록 크로스 브라우징에도 신경을 써야 합니다. 또한 퍼포먼스의 하향을 유발하는 비표준 방식을 지양하고, 웹표준을 준수하여 페이지를 제작해야 하죠. 또한 화려하고 동적인 인터페이스를 부여하는 자바스크립트 개발(예. ajax)이나 플래시 개발도 UI개발의 범주에 들어가므로 이 분야까지 할 수 있다면 금상첨화입니다. 따라서 UI개발자가 하는 일은 XHTML/CSS를 통한 화면 제작, 웹표준 준수, 개발단과...

30
8월
2007

XRAY – 박스모델 표시기(Bookmarklet)

자바스크립트에 관련된 소식을 많이 알려주는 해외 블로그 중에 ajaxian 이라는 사이트가 있습니다. 시간이 나면 자주 방문해서 글을 읽으면서 영어를 읽는 연습(?)도 하고 있습니다만, UI개발자로서 흥미있는 소식이 업데이트 되어서 스크랩 해봅니다. ajaxian’s article : http://ajaxian.com/archives/xray-your-internet-explorerOriginal Post : http://westciv.com/xray/ XHTML/CSS 개발을 하다 보면 박스 모델이란 난관에 부딪히게 됩니다. HTML의 각각 Element를 감싸는 요소는 margin, padding, border 등이 있는데, 컨텐츠를 박스 형태로 감싸는 이 요소를 더해서 정리한 것을 박스모델이라고 하죠. 그런데 이 박스모델을 렌더링 하는 방법이 각각의 브라우저들 끼리 차이가 발생합니다. 그래서 HTML 개발 시에는 이 박스 모델을 잘 파악하는 것도 일인데요, 이 작업을 도와주는 툴로는 IE의 플러그인인...

24
8월
2007

웹페이지 퍼포먼스 향상을 위한 기법 – 발표자료

얼마 전 회사에서 진행했던 세미나 발표자료입니다. 웹페이지 속도를 개선할 수 있는 방법을 UI개발 시점에서 살펴본 것이구요. 이 발표자료의 원본은 2007년 6월 8일 영국 런던에서 있었던 @media 2007 conference 에서 Nate Koechley 라는 분이 High performance for Web sites – 14 Rules for faster pages 라는 주제로 발표하신 자료입니다. 웹페이지의 속도를 빠르게 하고 효율성을 높여줄 수 있는 14가지 룰과 그와 관련된 배경지식을 다루고 있구요. UI개발과 관련이 있지만, 서버사이드 스크립트 차원이나 서버 차원에서 다루어지는 것도 있습니다. 우선 제가 속한 팀이 UI개발 팀이기 때문에 팀 업무영역에 관련된 것들만 추려서 발표자료를 만들어서 발표했었구요, 실제 발표내용은 스크립트로 넣었으니 참조하세요. 여담이지만,...