Category: frontend 개발 이야기

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

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...

18
2월
2009

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

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

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 개발 시에는 이 박스 모델을 잘 파악하는 것도 일인데요, 이...

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개발 팀이기 때문에 팀 업무영역에 관련된 것들만 추려서 발표자료를 만들어서 발표했었구요, 실제...

03
8월
2007

웹표준에 대한 생각

웹표준이라는 단어가 업계에 이슈화 된 계기는 개인적으로 “FireFox와 Windows Vista의 출현“이라고 생각합니다. MS에 종속적(?)이던 우리나라에선 디자인과 코딩도 항상 IE 위주, 그리고 IE에서만 동작하는 ActiveX(COM) 위주로 웹사이트를 제작해 왔죠. Mozilla 계열, 또는 Mac의 Safari 같은 웹브라우저를 사용하는 유저는 인터넷 사용자의 0.1%도 안되는 극소수였기 때문에 이들의 불평은 아예 무시되어 온 것이 사실입니다. 하지만 해외에서 급속하게 점유율을 늘려가는 파이어폭스의 존재로 인해, 우리나라도 컴퓨터를 조금 한다는 1~20대부터 파워유저에 이르기까지 파이어폭스를 사용하는 사람이 계속 증가추세에 있고, 제대로 보이지 않는 국내 대다수의 웹사이트로 인한 불평의 목소리도 점점 커졌습니다. 그리고 Windows Vista의 출현… Windows Vista의 강화된 보안...

01
8월
2007

내가 UI개발 직군을 선택한 이유

UI개발이라는 직군은 국내에서 탄생한지 얼마 되지 않은 생소한 직군입니다. 보통 HTML코더, 스크립터, 웹 퍼블리셔 등등… 호칭도 통일되지 않았습니다. 이른바 HTML코딩이라는 수단으로 디자인과 개발의 단순 지원 역할을 해주던, 웹개발 프로세스에서는 중요성이 많이 떨어지는 직군… 이었습니다. 하지만 지금은 사정이 많이 틀려졌죠. Web2.0 이라는 패러다임의 등장에 의해 세계의 웹사이트는 과도기에 휘말리게 됩니다. 아시다시피 End-User가 보는 화면은 HTML, 즉 “HTML코더”가 만들어내었던 화면인데, 국내에서는 ‘대충대충 빨리빨리’의 영향으로 매우 낮은 효율과 품질을 보이는 화면이 양산되어 왔던 거죠. 물론 사이트가 느린건 서버나 프로그램 로직 자체의 비효율성 때문일 수도 있지만, 이러한 Back-end 단의 비효율성 보다는 사용자가 HTML과 이미지,...