일모리와 웹표준

Sun, 09 Aug 2026 14:07:51 +0000

Walking in the rain

Sun, 09 Aug 2026 14:07:51 +0000

Walking

apple iPod Hi-Fi(ve) 애플 스피커의 새발견

Thu, 26 Nov 2020 02:30:00 +0000

애플 아이팟 하이파이(브).

벌써 2006년이다. 스티브잡스가 야심차게 Apple iPod Hi-Fi 를 공개하며 “내 음악시스탬을 바로 이 iPod Hi-fi로 교체했다” 라고 했던 바로 그 스피커. 하지만 실패작으로 치부되며 2007년에 바로 단종됬다.

당시 $349 의 나름 고가의 스피커로 공개되며 조명을 받았지만 음향 퀄리티와 가격에서(사실 더 고가의 아이팟 스피커들도 꽤 있었음에도..) 메스컴의 혹평을 받으며 구매자들에게도 외면을 받았다. 당시 스피커들의 유행이었던 상단 혹은 가운데 아이팟을 꼽는 부분이 있으며 아이팟을 컨트롤 가능케하는 리모콘이 포함되어 있다. 앞면 매쉬를 때거나 붙였다 하며 원하는 스타일로 변경 가능하며 기능과 버튼이 최소화 되어 미니멀리즘을 잘 보여준다. 상단 모서리는 들고 다니기가 가능한 손잡이로 사용이 가능한데 생각보다 스크래치가 쉽게 나는 재질에 맞지 않게 뒷면에 베터리4개를 넣으면 바로 들고 다닐 수 있는 포터블 스피커로 변신이 가능하다.

단종제품의 매력

2019년, 기억에서 지워졌던 그녀석이 눈에 들어왔다. 그리고 지나칠 수 없었다. 때마침 인터넷이 안되는 외진곳에서 종종 캠핑을 하다보니 필요에 의해 구입하게된 아이팟 5세대와 완벽한 조합이었기에 더더욱 놓칠수 없었다.

생산이 중단된지 벌써 13년이 흘러 이제는 골동품이지만 시간이 흘렀음에도 그 디자인은 아직까지도 애플 제품중에 탑에 들어간다고 생각한다.

Apple iPod Hi-Fi는 기능은 별볼일 없는 단순 인테리어 제품으로만 가치가 있을까?

2020년에도 화끈한 iPod Hi-Fi

2018년 애플은 Airport Express 의 Airplay2 지원 업데이트를 공개한다. Airport Express는 35mm 잭을 꼽을 수 있어서 아무 스피커든지 네트워크 스피커로 변환시켜주는 기기이다. Bluetooth와 다른점은 wifi가 연결된 애플제품에서 바로 Airplay 로 인식이 된다는 점이다. 애플 기기에서 소리 옵션 중 하나로 표기되기 때문에 같은 네트웤에 있다면 어떤 애플 기기에서도 Hi-fi로 소리를 출력하며 또한 시리, 애플와치, 아이폰으로 소리 및 기본적인 음악 컨트롤이 가능하다. 애플 환경을 구축한 나에겐 더할나위 없는 음향 시스탬이 구축된 것이다.

자주 사용하는 플로우는

아이폰으로 듣고싶은 플레이리스트를 시작한다.
소리를 airplay 로 바꿔준다 .
애플와치 옆 다이얼이나 시리음성으로 음악을 바꾸거나 소리조절을 한다.
같은 wifi네트워크라면 거리와 상관없다.

Airport Express2 와 Apple iPod Hi-Fi의 조합은 왠만한 현대식 스피커의 성능을 넘어선다.
유튭에서 Apple Hi-Fi 와 2017년에 공개된 Apple HomePod의 비교를 쉽게 찾아볼 수 있는데 HomePod의 장점에 어느정도 근접한 클래식컬한 도전이 되겠다.

2018년부터 판매가 시작되서 1년만에 30만개 이상을 판매한 HomePod 의 주요 기능이 구현가능하며 홈팟이 제공하지 못하는 멋스러운 흑백의 디자인은 커다란 메리트로 자리한다.

최소 $100 이상 거래되는 스피커가 누구에게나 맞는건 아니다. 하지만 애플 eco system 안에 이미 있으며 거실 한 가운데에 눈에 띄는 it 아이탬을 두고 싶다면 추천한다. 그 당시 실패작으로 불리었지만 시간이 갈 수록 사랑받는 애플의 Hi-Fi 스피커, Apple Express와 함께 지금 당장 귀가 즐거운 울림을 즐겨보길.

여담. Engadget의 Ryan Block이 2007년에 기고한 기사, Apple Hi-Fi, RIP 2006-2007 은 애플 스피커의 죽음을 애도하며 애플이 아이폰 해프닝으로 아이폰유저에게 $100을 주니 그걸로 스피커를 사보라고 권하고 있다. 이걸 좀 다르게 생각해서 2007년에 애플 주식으로 투자했다면? 살펴보니 $3662 라고한다.

여담 2. minimallyminimal.com 의 hifi글을 읽어보길 추천한다.

여담 3. iPod Hi-Fi 공개

티스토리 계정을 카카오로 연동 해버렸다

Wed, 25 Nov 2020 03:55:34 +0000

티스토리 계정이 카카오로 강제 변환된다. 시작 부터 봐왔던 티스토리라 정이 들었는지 블로그를 잃고싶지 않다는 생각에 방금 카카오계정과 연동을 마쳤다. 사실 글도 없는 블로그인데…

많은 찬성, 반대가 있겠으나 행보로 보나 요즘 개인정보 트랜드로 보나 카카오의 강제변환은 추후 실명제와 같은 방향으로 갈듯 보인다. 카카오 계정으로 변환 후, 티스토리는 추후 프리미엄 서비스로 전화번호 인증이 된 계정만 티스토리 사용가능이 되는 방향으로 결국 가지 않을지. 익명성을 낮추기 위한 실명제가 실행되기 일보직전의 행보라 보인다.

개인적으로 반갑지는 않다. 요즘 웹 서비스 회사들의 트랜드이긴하지만 익명성이 줄어가면 아이덴티티의 상품화가 더욱 심해지기 때문이다. 각각의 브라우저가 ID로 표기되어 브라우저의 서핑 성향에 따라 광고라던지 검색결과, 컨텐츠가 컨트롤 되는 세상이다 보니 점점 서비스제공 회사들은 최대한 유저들을 지명하고 찾아내기 위한 여러 방법들이 개발되고 적용하는 중이다.

단순한 계정 합병으로 인한 보안을 높이고 카카오 이코 시스탬으로 더 빠지도록 유도하는 시도일지, 그 이상의 움지임일 지는 두고 봐야겠지만 순수한 목적이라고 하기에는 요즘 너무나 믿기 힘든 세상에 살고있지 않나.

여담. 인스타그램 시스탬을 써보긴했는데 역시나 생각을 길게&깊게 나누기엔 블로깅이구나 싶다.

여담2. Medium 멤버쉽 유료화가 이미 꽤 지난듯 싶은데 평가가 궁금하다..

구글 크롬에서 HTTP는 not secure 표기

Wed, 25 Jul 2018 17:33:34 +0000

2018년 7월 크롬 68부터는 HTTP 사이트는 느낌표 대신 Not Secure 로 표기된다. 플래쉬가 사라져가듯 HTTP 도 밀려나고 있는게 자연스럽다만…

Chrome’s “not secure” warning helps you understand when the connection to the site you’re on isn’t secure and, at the same time, motivates the site’s owner to improve the security of their site. Since our announcement nearly two years ago, HTTPS usage has made incredible progress. We’ve found in our Transparency Report that:

76 percent of Chrome traffic on Android is now protected, up from 42 percent

85 percent of Chrome traffic on ChromeOS is now protected, up from 67 percent

83 of the top 100 sites on the web use HTTPS by default, up from 37

2년 전 HTTPS 권장의 일환으로 브라우저에서 "not secure" 를 활용하기 시작하면서 안드로이드 기기 트래픽 42%에서 76% HTTPS 증가, 탑100 사이트중 83개가 HTTPS 기본 장착이 되었다.

추가하면 크롬 70부터는 HTTP에서 input field 는 주소창에 붉은 글자 표기가 된다.

2년간 이미 34%가 변화되었다. 별일이 아닌거 같지만 동그란 아이콘에서 첫페이지 부터 대 놓고 Not Secure 표기 변화는 분명 클라이언트의 문의가 100% 들어오게 될 부분이다. 모두가 68+로 바로 업데이트를 하진 않겠지만 올해 안에 언급이 분명히 된다. 아직도 진행되지 않았다면 더 이상 미룰 수 없을 것이다.

HTTPS로 넘어가겠다면 Let’s Encrypt 를 쉽게 활용 할 수 있고 Cloudflare 같은 무료 서비스도 활용 할 수 있다. 특히 클라우드플레어는 깊은 지식 없이도 적용이 가능하다.

오랜만에 지킬 깃헙 페이지 서비스를 켜니

Sun, 15 Jul 2018 22:33:34 +0000

워드프레스와의 긴 인연을 뒤로 하고 지킬 깃헙으로 넘어온지도 3년이 넘었다. 역시 그당시에 이슈로 꼽았던

워드프레스 보안,
php,mysql의 버전업데이트로 인해 발생하는 의존성, 지속성의 문제
점점 무거워지는 프로그램,
그리고 매년 나가는 호스팅 비용

등을 생각하며 이 모든것을 해결할 방법이 깃헙의 Pages 서비스라고 판단했던 것이 맞아 떨어졌음을 자랑스럽게 생각하고 있다. 각종 블로깅 서비스들이 존재하지만 애플 맥 컴퓨터를 사용하고 터미널 사용에 문제가 없다면 github pages 서비스를 사용해 보기를 추천한다.

예전 github pages 서비스를 다시 가동시킬 때

여담을 뒤로하고 수년만에 Github 을 통해 글을 올리려다 보니 기억에서 잊혀진 사용 순서를 잠시간 생각해야 했다. 그도 그럴 것이 그 당시 옥토프래스나 지킬을 설치하고 스킨을 수정하며 페이지도 새롭게 하는 등 많은 복잡한 순서를 거쳤으니 새 컴퓨터에서 새 글 발행에 뭐가 필요하더라? 생각에 잠시나마 예전 노트를 뒤적였었다.

알고보면 너무 간단 하지만 훗날 다시한번 잊어버릴 내 뇌를 위해, 그리고 나와 같이 기억력이 떨어진 방문자를 위해 적어둔다.

이미 드랍박스로 백업이 자동으로 되어 있는 상태이므로 해당 폴더와 github 서비스만 연결해주면 되는 상황이다.

먼저 두가지, xcode과 ruby를 확인한다. xcode를 최신 업데이트 해주고 사용자 동의서까지 읽어주고 동의 해준다. Ruby는 2.2.5 이상인지 확인한다.

ruby --version

새 os라면 2.3은 깔려있을것이다.
github-pages 를 재설치 한다. Terminal 에서

sudo gem install github-pages
사실 github-pages 가 설치되면 끝이다.
혹시나 git 명령어가 기억이 나지 않는다면
일단 Terminal 에서 블로그 글이 들어 있는 폴더로 이동.

git config --global user.name “이름”

git config --global user.email “깃헙에 사용한 이메일”

깃헙저장소의 폴더와 차이가 있나 확인.

git status

글 발행이나 디자인 변경시에는 해당 파일 수정 후,

git status

git add .

git commit -m “업데이트 파일에 대한 설명”

git push origin master

필요하면 글 완성 후 jekyll 서버를 활성화 해서 preview 미리보기를 시도해볼 수 있겠다.

오늘도 html과 css로만 만들어진 초고속 속도의 사이트는 탈없이 돌아가고 있다. 오바.

Remember where you are

Wed, 09 Nov 2016 12:55:00 +0000

Remember where you are, so that you’ll remember where you were.

오바마가 당선됬던 밤을 기억한다.

오늘도 기억에 강하게 남을 날이다. 즐겁게 웃으며 오늘을 되씹길 바란다.

"We will not deny his legitimacy. But we will oppose his worst policies and hold him to account for any lies." https://t.co/AzO67iqjc0 pic.twitter.com/XMDU7PcYAr
— The Daily Beast (@thedailybeast) November 9, 2016

JUST IN: Pres. Obama called President-elect Trump early today to congratulate him on his victory, White House says https://t.co/9dHy6nsFVR pic.twitter.com/GRL6hFB4iA
— CNN (@CNN) November 9, 2016

The moment America knew that Donald Trump would become the next president https://t.co/RfaPaxnA4y pic.twitter.com/KUNEAqm9hE
— CNN (@CNN) November 9, 2016

CNN> Carl Bernstein: Trump win is 'tragic and dangerous': CNN commentator Carl Bernstein… https://t.co/7L7COPlOfJ
— CNN Free Video News (@vnewsen) November 9, 2016

Donald Trump's supporters expect him to deliver on
- The wall
- 'Lock her up'
- Muslim ban
- Obamacare
- NAFTA & TPPhttps://t.co/bX9lJqPRqK pic.twitter.com/oPibLNAK4A
— CNN (@CNN) November 9, 2016

As requested, I'm posting this on behalf of MILO. @CNN @cnnbrk @CNNPolitics 🐸 pic.twitter.com/KFy7q6OjiT
— JP MOORE (REAL) (@Democrat_4Trump) November 9, 2016

Trump victory a 'whitelash' against a black president, says CNN's Van Jones – video https://t.co/K5ipN89gyb
— The Guardian (@guardian) November 9, 2016

살아있으니까 블로깅. 블로깅 리스트 2016

Fri, 13 May 2016 12:16:00 +0000

블로깅의 황금기는 지나갔을까?

블로그 관련 서비스들이 하나둘 사라지고 있다. 소위 말하는 메타블로그 사이트들은 서비스를 접은지 오래고 다음 view 라던지 포털사이트들의 블로깅 관련 서비스들은 가지 쳐내기가 이미 이루어진 상태이다. 자주 방문하던 DNS Lens 서비스도 문을 ‘곧’ 닫고 가끔 방문하던 개인 블로그들 반은 접속 불가다.

누군가의 말대로 블로깅은 죽은 걸까? 섣불리 답하기는 곤란하다. 블로깅의 에센스를 가지고 새 옷을 입은 서비스들이 시작되고 있기 때문이다. 이 흐름의 한 획을 그은 서비스는 Medium. 구조적으로는 네이버나 다음의 블로깅 생태계와 같으나 미려한 디자인과 출판이라는 개념이 사용자들에게 글 쓰는 것 그리고 그 안에서 나누는 것이 멋진 일이라는 경험을 하도록 만들고 있다. 글의 질 만큼 생태계가 활기가 넘치며 건강하다.

최근 Medium 의 한국버전으로 카카오의 Brunch 가 뜨고있는듯 하다. 베타부터 곧 1년이 될듯한데 컨텐츠 질이 생각보다 좋다. 건강한 생태계가 꾸려지고 있는듯하다. 다만 서비스의 특성상 좋은 글들이 오래 지속되어야 할텐데 과연 카카오가 서비스 유지를 할지에 대해서는 장담할 수 없다는게 아쉽다.

블로깅의 황금기는 지나갔다고 누구는 말할지 모른다. 하지만 아무리 정보소비가 인스턴트 식품처럼 빠르게 이루어지며 트렌드가 된다 해도 인간이 가진 자유의지와 표현은 계속될 것이며 장인이 만든 음식을 찾듯이 한땀한땀 흘려 만든 소중한 글들은 찾아지게 될 거라 생각한다.

살아있다면 적어보자.

고르기

선택가능한 서비스들을 나열하자면

등의 한국 무료 블로그 서비스가 있다. 각 서비스가 장단점들이 있겠지만, 대형커뮤니티를 자랑하는 포탈 블로그와 블로깅및 테마에 충실한 티스토리 이글루스 등이 있다. 티스토리는 구글 애드센스가 인기를 얻던 타이밍과 함께 성장했던 커뮤니티라 그런지 광고를 상당수 볼 수 있다. 위의 서비스들은 모두 각자의 커뮤니티를 이루어 서로 교감한다.

이 외에 간단한 영어도 괜찮다면 이하의 서비스들이 있다.

Tumblr

텀블러는 거대하지만 조용한 커뮤니티이다. 특별히 튀지도 않고 소소하게 포스팅을 나누는 느낌이라고나 할까. 긴 글 보다는 짧은 느낌, 사진, 영상을 나누는 일기장 형태의 공간이므로 취향을 생각해서 골라야 하겠다. 워낙 커뮤니티가 매력적이라 빠져나오기 힘들 수 있다.

Medium

글쓰기의 정상자리를 엿보고 있는 Medium. 디자인을 변경할 수는 없지만 굉장히 멋깔나는 스타일의 글을 완성할 수 있다. 글 자체에 노력을 기울인다면 결과는 그 이상이 나오리라 생각한다. 글이 미치는 역량에 기반해서 시작된 서비스이므로 인쇄되는 글들이 내용이 꽉 차있다. 가끔은 쓰는 재미보다 읽는 재미가 더 넘치는 곳이다. 최근 한글로 작성된 글들이 많이 보인다. 한인 Publication 인쇄소들.

구글 애드센스나 설치형 방문자 기록 등의 기술을 적용할 수 없다.

“The world has reached a saturation point of shallow, thoughtless content, and half-skimming through these pages of filler is increasingly unfulfilling. Every day, your Medium homepage is full of stories with depth and meaning—stories that make you laugh, cry, and actually feel things.” 웹의 세계는 얕고 생각 없는 컨텐츠로 포화상태에 이르렀고 빈 곳을을 채워 넣은 무득한 페이지들을 걸러내서 보기엔 진절머리가 난다. (그에 반해) 매일 당신의 Medium 홈페이지는 깊고 의미 있는 이야기들로 웃고, 울고, 느낄 수 있도록 채워져 있다. - about Medium

Wordpress.com

Wordpress.com은 블로깅 하면 연관검색에 1위로 나올만한 블로깅 서비스이다. .org 주소는 설치형, .com 은 서비스형이며 굉장히 오랫동안 유지되고 있는 서비스라 오히려 진부하다라는 느낌마저 든다. 방대한 커뮤니티이지만 네트워크는 없다고 보면 된다. 여러 무료 테마들이 즐비해 있다.

Postach.io

Postach.io는 Evernote 를 사용한다면 바로 블로그를 시작할 수 있게 도와주는 서비스이다. 사용해 본 적은 없지만 에버노트의 장점을 그대로 살릴 수 있는 서비스 같다. 다만 유저들간의 교류에 대해서는 장담할 수 없다.

Posthaven

Posthaven 이메일로 블로그를 올리는 서비스. 특정 이메일 주소로 보내면 글이 발행된다. 절대 회사를 넘기거나 팔 생각이 없으며 서비스를 반영구적으로 유지하겠다고 주장하는 곳이다. 매달 $5의 가격이며 몇몇 눈에 띄는 사람들이 사용하고 있다. 유료가 아니었다면 고민해봤을 듯 하다.

이메일을 사용하는 것이 뭔가 아날로그 느낌이 나는 건 무슨 이유일까?

svbtle.com

svbtle.com 은 깔끔하고 좋은 Medium 느낌이 나는 서비스이지만 유료이며 반영구적으로 유지하겠다고 이곳 또한 약속하고 있다. Medium 이지만 복잡한 커뮤니티에서 나와서 나만의 글을 남기는 공간을 만들어가는 것이 매력이다.

Jekyll 을 사용한 Github Pages

일모리네 사이트가 작년에 워드프레스에서 넘어오면서 소개했던 Github Pages 서비스이다. 지금도 아주 잘 사용하고 있고 꼭 git 명령어들을 배우지 않고도 Markdown 만으로도 글을 발행할 수 있다. 무료이며 정적인 페이지를 출력해주기에 (.html) 안정성과 속도는 타 사이트와 비교가 불가하다.

Jekyll 설치 또한 가능하며 터미널을 키고 사시는 분들에게는 강력하게 추천하는 서비스이다.

설치형

아주 다양한 설치형 블로깅 툴들이 있다. 가장 대표적인 워드프레스부터 무버블타입 국산 Textcube, 최근 잘 나간다는 ghost등이 있다. 설치형의 단점은 호스팅 서비스를 구입해야 하고 기본적인 서버에 대한 이해가 있어야 한다는 것이다.

Wordpress.org - 가장 방대한 유저기반과 리소스를 자랑하는 무료 툴
MovableType - cms에 가까워진 안정적인 강력한 유료 툴
Textcube - 테마수정이 강력한 국산 툴
Ghost - 설치형은 무료. 서비스형은 유료
Anchor - 150kb 밖에 되지 않는 초경량 오픈소스 툴
Wardrobe - 간단한 블로깅을 가능하게 해주는 툴. 미니멀리즘과 함께 이 또한 github에 공개되어 있다. 깃헙 커뮤니티에서 여러 무료 테마들을 사용할 수 있다.

그 외

이 외에도 블로깅이 주 목적은 아니지만 블로깅을 자연스럽게 지원하는 여러 서비스들이 있다. squarespace, weebly, Kirby, Wix 등의 무료 서비스들을 사용해보기 바란다.

Jekyll markdown 업데이트

Wed, 11 May 2016 02:13:00 +0000

오랜만에 와보니 jekyll 의 업데이트와 와 그에따른 몇가지 수정을 요하는 부분들이 있었다. 이번 jekyll 3.0 업데이트의 큰 부분은 더이상 kramdown 외의 마크다운 엔진을 지원하지 않는다는 것이었고 redcarpet 엔진을 쓰고 있는나는 사실 몇초간 맨붕이 오긴 했었다.

각 포스트들에 첨부한 footnote 기능이나 코드블락을 잘 표현해주는 것이 맘에 들어서 선택한 엔진인지라 이거 혹시 이 기능들이 지원 안되는 건가 한탄을 하고 있었지만 jekyll3.0 업데이트 문서를 보니 다행히 redcarpet 과 rdiscount 의 기능들을 모두 사용 가능한듯 하다.

If you are currently using Rdiscount or Redcarpet we’ve enabled kramdown’s GitHub-flavored Markdown support by default, meaning kramdown should have all the features of the two deprecated Markdown engines, so the transition should be as simple as updating the Markdown setting to kramdown in your site’s configuration (or removing it entirely) over the course of the next three months.

간단히 _config.yml 수정으로 엔진을 갈아 타는 것이지만 그 잠시간의 맨붕의 몇초를 생각하면 역시나 서비스 사용을 문제없이 오래하려면 기본틀 안에서 놀아야 한다는 걸 다시한번 상기하게 된다.

완벽한 마이그래이션은 아닐것이고 아마 인용문구 등의 사용이나 code 블락의 표현에서 어딘가에는 충돌이 있긴 할듯 하다.

Jekyll 3.0

말 나온김에 제킬3.0을 살짝 살펴보면 markdown 지원을 kramdown 으로 제한하는 것 외에도 Textile 마크업 사용 또한 지원하지 않으며 relative permalinks 또한 지원하지 않는다.

외에도 로컬서버에서 빌드하는 속도나 프리뷰 속도 개선및 liquid profiler 라 말한 속도가 표기된 테이블 출력등이 소개됬다.

The changes introduced today promise to make GitHub Pages a faster, more intuitive experience for new and power users alike.

더욱 빠르고 직관적인 Pages 서비스를 위해서라는 슬로건 아래 불필요한 리소스 안잡아 먹고 서비스를 꾸준히 유지해 줄 수 있다면 해달라는거 뭘 못할까.

워드프레스에서 이사한지 1년이 넘었지만 서버, 보안, 가격 신경 안쓰고 무료로 즐기는 서비스일 뿐만이 아니라 아주 강력한 customization 에 아주 만족하고 있다.

웹디자인을 위한 키워드 검색 모음을 모은 사전의 사전.

Wed, 25 Feb 2015 03:24:11 +0000

요즘 워낙 많은 무료 웹디자인 소스와 웹 디자인 강좌 및 팁들이 쏟아져 나오는 시대이기에 바른 용어 검색시에 엄청난 이득을, 반대의 경우에는 많은 시간 소비를 가져옵니다. 아마 새 기술에 대한 부분들이 특히나 그러한데 많은 경우 바른 단어가 생각이 나지 않을 때가 많습니다.

이하의 부분들은 각 웹디자인/개발에 사용되는 단어및 용어들, 키워드 들을 적어 놓은 것들입니다. 새 트랜드가 떠오를 때 마다 반영될 예정입니다.

웹디자인 트렌드, 유행

Adaptive Web Design

“미리 맞춤틀을 파악하여 변화” ¹ ² 미리 정해진 틀을 사용하여 브라우저 보다 유저에게 집중을 목표로 하는 디자인. 디바이스에 적응하는 방식으로 접근함. 고로 서버쪽 접근과 연관짓는 디자인 방식. 일정 부분은 반응형도 포함하며 여러 많은 기술들을 포괄적으로 사용하는 방식.
- Progressive Enhancement: Adaptive와 동일시 되며 사용되기도 하며 단계적(혹은 점진적) 향상으로 번역됨. 개발순서와 기능,스타일 등을 컨텐츠 중심으로 모바일과 같은 단순 형태에서 부터 차근차근 쌓아 올라가는 방식. Mobile First 전략으로 변환되어 나누어 지기도 함. 모든 브라우저에서 기능과 보여지는 부분이 최대한 동일시 되도록 함.
Responsive Web Design

“맞춤을 위해 유동적 변환” ³ css media query 나 %를 활용한 유동적 레이아웃 & 이미지등을 활용하여 변환 가능한 디자인. 기존의 사이트를 Responsive 로 변환하기 간편하므로 더욱 널리 사용되고 있슴. 관련 키워드. elastic, fluid/liquid grid, responsive layout, adaptive layout
Grid Design

그리드 디자인은 정해놓은 사이즈 가이드를 따라 디자인하는 방식.
Flat Design

윈도우 8(metro design)⁴ 의 등장과 함께 신분상승한 디자인. 그림자나 그라데이션등의 입체감을 없엔 평면에 붙은듯한 디자인.
Skeuomorphic Design

애플이 자주 사용했던 실물과 비슷한 그래픽 모습을 구현하는 방법. Flat의 반대로 이해되어 버린 상황. ⁵
Rich Design

Skeuomorphic 과는 다르게 그림자나 그라데이션을 사용하여 입체감이나 스타일을 더한 디자인. Flat의 반대에 더 가까움.
Material Design

메터리얼 디자인. 구글의 디자인 가이드. Flat 과 Rich 사이의 디자인 패턴. 약간의 입체감을 더한 flat으로 이해되기도 함.
One Page Web Design / Single Page Web Design

원페이지 디자인. 한 페이지 안에 모든 페이지를 첨부한 디자인. 이벤트나 소개용으로 많이 사용됨.
Cards Web Design

핀터레스트와 같은 리스트를 박스로 표현하는 사이트와 함께 신분상승된 디자인.
Monochromatic Web Design

단일 색상을 톤을 변화해 가며 사용하는 디자인.
Hypercolour Web Design

하이퍼칼라 디자인. 화사한 강한 색을 사용한 디자인.
Minimal Design

불필요한 이미지, 요소들을 최소화 하며 단순한 디자인을 지향. 연관 개념으로 clean, simple 등이 있슴.
Retro Web Design

레트로, 예전 디자인. Vintage 로 대체 되기도 하고 물론 다르게 쓰이기도 함.
Motion Web Design

모션디자인. 정적인 페이지에 동적인 부분을 포함시킴. 슬라이드, 후버효과 등을 포함.

기능이 부각된 디자인

Parallax (scroll)

페랄랙스 디자인. 스크롤링 크기를 엘리먼트들에 다르게 주는 기법을 사용한 디자인.
Full Screen Design

풀스크린은 유저의 브라우저 사이즈를 로딩시에 계산하여 브라우저 전체를 채우는 디자인.
Full Size Video

풀스크린과 같이 비디오 영상을 배경으로 까는 디자인.
Infinite Scroll

스크롤링이 무한대로 되는 스타일.
Modular Scroll

웹사이트의 각 부분이 스크롤가능한 디자인.
Split Screens / Gateway

대칭이나 비교등의 목적으로 스크린을 크게 나누어 비슷한 디자인 패턴을 적용하는 스타일.
Cinemagraphs

정적인 이미지에 특정 부분만 움직인다던가 보통 말하는 gif 같은 움직이는 이미지를 활용한 방식.
Interactive

단순 스크롤 메뉴 클릭 이상으로 유저들이 참여할 수 있는 기능들을 첨부하여 컨텐츠에 더욱 빠지도록 하는 방식. 예전에는 Flash 사이트들이 이 목적으로 많이 쓰여졌슴. 옆으로 드레그, 클릭시 움직이는 그래프 사물, 영상 등등.

종류

Editorial

신문 혹은 메거진 웹사이트 디자인. 단순 Magazine style 로 말하기도.
Portfolio

포트폴리오 사이트. 사진들과 영상등을 부각시키는 사이트.
E-Commerce

쇼핑몰 사이트.
Storytelling

이야기 형식으로 풀어내는 사이트.
Infographics

인포그래픽 사이트. 정보를 보여주는 사이트.
Gamification / Quizes / Option Paths

정적이고 따불할 수 있는 사이트에 재미를 더하거나 반응 요소를 첨부하여 유저에게 다가가는 방식의 사이트. 전체적일 수도 있고 부분적일 수도 있슴.
Microsite

기존의 사이트에서 특정 페이지나 정보를 보여주기 위해 다른 디자인으로 제작된 사이트. 페이지 수가 적거나 한페이지로 구성.

웹사이트 요소

Large Hero Areas

보통 페이지 상단의 큰 베너 부분으로 큰 배경 이미지가 삽입됨.
Landing Page

마케팅과 연관된 단어. 해당 사이트의 클릭시 도착하는 페이지를 말함. Homepage 도 될수 있지만 제품소개나 방문자를 위한 특정 목적을 위한 페이지.
Fold

접힌 신문의 가장 먼저보이는, 즉 접힌부분의 상단을 나타내는 단어로 사이트의 가장 상단 부분.
Slider

엘리먼트가 슬라이드 하여 움직이는 기능.
Accordion

어코디온 악기와 같이 엘리먼트 묶음아래 한 부위가 늘면 다른부분이 줄어드는 방법을 구현한 부분.
Modal (Box)

특정 엘리먼트를 팝업처럼 돋보이게 하는 방법.
Dropdown

하단으로 메뉴나 엘리먼트가 출력되는 방법.
Sticky * / Pinned elements / Fixed position navigation

페이지에 고정된 엘리먼트.
Scrollspy / Affix

페이지의 위치를 고정된 엘리먼트가 알려주는 방법. 싱글페이지 사이트가 발전하며 개량된 메뉴 방식.
Popover

Modal과 비슷한 방식이지만 목적은 해당 링크나 엘리먼트의 설명이나 기능을 돕도록 바로 주위에 나타나게 하는 방식.
Collapse

특정 엘리먼트가 슬라이드하여 늘어났다 줄었다 하는 방식. Acoordion과는 살짝 다름.
Carousel

보통 생각하는 슬라이드와 같이 여러엘리먼트를 한곳에 모아서 슬라이드가 되며 보여주기도 하고 클릭으로 옮기기도 하는 것.
Pagination

각 페이지로 넘어갈 수 있도록 돕는 보통 하단에 위치한 숫자로된 링크.
Breadcrumbs

현 페이지 위치를 보여주는 형식. Home > About > Works
Glyphicons / Glyphs / Font Icons

아이콘을 이미지로 표현 대신 폰트로 보여주어 고화질에서도 깔끔케 보이도록 하는 방법. 요즘은 이 방법과 svg 와의 대결구도.

Extra

Branding

크게는 회사/제품을 시각/형상화 및 알림. 작게는 로고나 심볼, 아이콘을 사용하여 제품에 부각시킨 테크닉. 브랜딩을 위한 많은 자료들이 올라와 있슴.
Wireframe

사이트/앱 개발중 레이아웃및 상황의 뼈대를 그리고 수정하는 것/단계.
Mockups

기존의 프로토타입 혹은 테스팅을 위한 모형 개념으로 웹디자인에서는 wireframe 후의 단계중 기능은 없지만 실제 디자인을 표현해 낸 단계. 소위 말하는 포토샵 단계.
Lorem Ipsum / placeholder text / dummy text

공간 채움을 위한 의미 없는 글. 한글로도 가능.
CMS

content management system. 사이트의 글올리는것이나 유저관리등의 사이트 관리를 쉽게 돕는 시스탬.
favicon

파비콘. 보통 사이트의 주소 왼쪽에 나타나는 아이콘에서 이제는 윈도우의 사이트 아이콘이나 아이폰의 아이콘 영역까지 확장되어가는 중.
Freebies

무료로 제공되는 것을 검색시 free 보다는 freebies 가 명사의 역할을 더 확실히 하기에 필요한 검색결과에 더 가까이 근접할 수 있슴. 반대로 유료검색은 Pay보다는 Premium 으로 인식하는게 더 나은 검색 결과를 가져올 수 있슴.
Template

사실 무료와 상관이 없지만 급하게 친해지게 된 템플릿이라는 단어는 미리 말들어진 틀에 사용자가 채워넣거나 간단한 수정만을 요구하므로 수고를 거의 들이지 않고 결과를 얻는다는 개념에서 ‘무료’와 떨어질 수 없는 관계. 물론 무료 템플릿을 원하는 시장이 커진만큼 인터넷 결제의 성장과 함께 유료 템플릿 시장도 만만치 않게 성장함. 최근 이 premium 시장이 급성장 하면서 고급 디자인을 디자이너 없이 사용하게 되는 상황. 사실 웹디자인 사전의 모든 단어와 template 을 결합시키면 수많은 리소스가 널려 있는 세상을 보게 됨.
CAPTCHA

꼬부러진 글자를 빈공간에 넣으므로써 댓글이나 로그인 시 봇을 걸러내기 위한 기술. 이제는 봇을 걸러내기 위한 기술로 통일되어 쓰임.
WYSIWYG

위지윅. What you see is what you get. 보여지는데로 출력이 가능한 에디터. 예) 드림위버.

Aaron Gustafson “So, we were trying to think of, you know, what exactly does all of this stuff really mean, and it was about creating rich, adaptable experiences that tailor themselves to the particular device that you were working with. So, the way that I view progressive enhancement is very much analogous to adaptive web design. It’s essentially the same concept.” ↩
Aaron Gustafson “To me, “adaptive web design” is just another term for “progressive enhancement” of which responsive web design can (an often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.” ↩
Ethan Marcotte ↩
정확히는 윈도우폰 7에서 부터 선보였으나 인기가 널리 퍼진건 윈도우 8 때부터. Metro Design 을 상품등록한다는 루머도 돌기는 했지만 일단은 마이크로소프트 디자인 언어로써 임시로 쓰인 코드이름 이었던 것이 지금까지 이어짐. ↩
http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/ ↩