일모리와 웹표준

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/ ↩

Jekyll,Git 을 몰라도 무료 Github Pages 즐기기

Wed, 28 Jan 2015 12:14:11 +0000

Github Pages 는 Github에서 제공하는 무료 웹사이트 서비스로써 자신의 프로젝트 소개나 회사를 소개하기에 편한 곳이지만 Jekyll 엔진이 돌고 있으니 간단한 블로깅이 가능하다. 다시말해서 무료로 회원들이 블로깅 서비스를 누릴 수 있다. “워드프레스에서 Jekyll로 마이그레이션” 에서 소개했듯이 많은 장점을 갖고 있지만 git 을 배워야 하고 Jekyll을 깔아야 하는 번거로움과 어려움이 따른다.

이 글에 소개되는 Fork를 이용한 Pages 사용법은 진입장벽이 높을 수 있는 Pages 를 간단한 방법으로 온라인에서 즐길수 있도록 하는 방법이다. 이 방법이 어떤 앱이나 프레임워크등의 전혀 새로운 아이디어가 아님을 밝힌다.

이 글의 대상은 Github 조차도 모르는 상황의 유저이며 아무런 사전 지식 없이 무료로 블로깅을 시작하도록 돕는 목적으로 쓰여졌다.

이 과정을 마치면 얻게되는 결과물은 이러하다.

온라인 상에서 자신의 주소 (http://유저아이디.github.io) 로 블로깅이 가능하다.
모든 작업은 github.com 에서 이루어지므로 컴퓨터에 설치해야 할 것은 없다.
github.com 에서 파일을 추가하고 수정할 수 있게된다.

워드프레스에서 Jekyll + Github 으로 마이그레이션을 진행한 이야기는 바로 이전 글을 참고하기 바란다.

Github 가입

Github.com 에서 Username 과 이메일, 암호를 적고 곧바로 가입을 한다.
가입후 Github 플랜을 골라야 한다. 무료가 이미 선택되어 있으니 하단에 Finish sign up 을 눌러 가입을 마무리 한다. 본인 확인을 위한 이메일이 도착해 있을테니 가입시 기입한 이메일 주소의 메일함으로 가서 확인 바란다. 이메일의 본인확인 링크를 클릭하여 확인하지 않을 경우 서비스를 사용할 수 없다.

Fork 하기

가입 후 알아야 할 용어는 repository 와 fork 이다.

repository 는 각 계정의 프로젝을 넣는 공간이라고 이해할 수 있다. Repo 라고 줄여 부르기도 한다. 여러개의 repo 를 만들 수 있고 누구든지 공개된 repo 에 들어가서 볼수 있다.
Fork 는 복사/클론 이라고 이해하면 될듯 하다. 누군가의 repo 에 들어가서 Fork 버튼을 누르게 되면 내 repo 안에 복사되어 저장된다.

용어를 알았다면 https://github.com/barryclark/jekyll-now 를 Fork 하여 내 저장공간인 repo 로 그대로 복사해오자. 링크를 따라가면 오른쪽 상단에 fork 버튼이 보일것이다.

몇초가 걸리긴 하지만 Fork가 끝나면 여러 파일이 들어있는 repo가 생겼을 것이다. 왼쪽 상단을 보면 유저이름 / jekyll-now 라고 되어 있을것이다.

Setting 수정 - Repo 이름 바꾸기

Repository 이름을 jekyll-now 에서 자신의 유저이름.github.io 로 바꾸어야 한다. Github이 해당 repo가 블로그 사이트로 사용되는걸 인증하는 방법이다.

오른쪽 Settings 을 누른후 Repository name 란에 jekyll-now 대신 자신의 아이디.github.io 라고 수정한다.

Jekyll-now 에서 지금까지의 과정을 gif 로 만들어 올렸다.

Customize Settings

파일을 수정하는 간단한 방법은 해당 파일을 클릭 후 연필 모양의 Edit 버튼을 누르는 것이다.

사이트의 기본틀을 가져왔으니 기본 설정파일인 _config.yml 을 수정하고 사이트가 정상적으로 작동하는지 확인한 후 다음 단계인 글을 써보겠다.

_config.yml 파일을 클릭한 후 Edit 버튼을 누른다.
각각의 비어있는 공간을 채워준다.
모든 정보를 기입할 필요는 없으나 적어도 name 과 url 은 수정해준다.
url은 “http://자신의 아이디.github.io” 라고 표기한다.
수정을 마쳤다면 하단에 Commit changes 버튼을 눌러준다. 가능하다면 버튼 바로위의 빈칸에 무엇을 수정하였는지 설명을 넣어주자. 올바른 연습이 될 것이다.

모든 수정을 마쳤다면 새 브라우저를 열어 자신의 블로그 주소로 접속해 보자. 가장 처음으로 사이트를 띄우는 상황이니 30분까지도 걸릴 수 있다. 참고 기다려보자. 이메일확인을 했는지도 꼭 확인하자.

첨부된 글을 수정하며 문법 배우기

모든 블로그 글은 _posts 폴더안에 있어야 한다. 첫 글은 이미 폴더 안에 첨부되어있으니 그 글을 수정하며 글 작성에 필요한 부분을 살펴보겠다.

_posts 안의 2014-3-3-Hello-World.md 를 수정한다.
수정을 누르면 몇가지 눈에 띄는 부분이 보일것이다.
- — 3개의 대쉬가 위 아래로 있으며 이전의 _config.yml 파일처럼 지정 이름이 있고 값이 지정되어 있다. Front-matter 라고 부르는 부분이다. 모든 글의 상단에는 바로 이 Front-matter 가 첨부되어야 한다. 글의 제목, layout 파일이름, 날짜를 꼭 넣으며 categories 등도 적어 넣을 수 있다.
- layout: post 는 _layouts 폴더의 post.html 을 지정하며
- title: 은 글의 제목을 지칭한다. 글의 웹 주소를 지칭하지는 않는다. 글의 웹 주소는 파일 이름을 따라 지정된다.
- 글 안을 보면 ![대체텍스트](/폴더/이미지 주소) 형식의 부분이 보일 것이다. 이미지를 나타내는 부분인데 !표를 빼면 단순 링크를 나타낸다. [링크이름](링크주소)
- 타 사이트 이미지를 보여주는 것은 가능하나 이미지를 자신의 repo에 웹을 통하여 첨부하고 사용하는 방법이 없다.¹ 그나마 간단한 방법은 issue 를 사용하여 이미지를 사용하는 방법이다. 이는 맨 하단에서 설명하도록 하겠다.
- 이러한 표기법은 markdown 이라고 부르는데 글 작성시에 markdown 형식으로 글을 작성해야 한다. 그다지 어려운 형식은 아니니 꼭 배우기 바란다.² 간단히만 보면
- # 는 h1(글제목), ## 는 h2, > 는 blockquote(인용문구), * 는 list. **를 양쪽에 쓰면 strong(강조).
하단의 Commit changes 버튼을 누르고 수정이 적용 되었는지 확인해보자.

새로운 글을 써보기

수정한것과 마찬가지의 순서이다. 다시 _posts 폴더에 들어가서 branch: master 옆의 주소 끝 부분에 있는 + 를 눌러준다.

새 파일을 만드는 페이지가 나오면 제일 먼저 파일 이름을 먼저 정해준다. 년-월-일-글제목.md 로 정해주어야 한다.

그리고 내용란에 Front-matter 를 먼저 적어준다.

---
layout: post
title:  "Github Pages 에 올리는 첫 글"
date:   2015-01-28 17:30:00
---

그 후 적고 싶은 글을 적어본다. 그리고 하단의 Commit new file 을 클릭한다. 첫 글이 올라갔을테니 확인해 본다.

그 외

첫 글은 올렸지만 아직 수정해야 할 것들이 남았다.

방문자가 잘못된 경로로 접속하거나 페이지 에러가 났을때에 출력되는 404.md 페이지
현 repo 소개를 나타내는 (파일리스트 밑의 긴 글) README.md
실제 소개페이지가 될 about.md 를 자신의 소개로 채워보자. 사이트에서 About 클릭시 출력되는 페이지 이다.

이미지를 첨부하여 보여주기

위에서 잠깐 언급했지만 직접 이미지를 자신의 repo 에 업로드 하여 사용 하는 방법은 자신의 컴퓨터에 git을 설치하여 직접 자신의 repo 와 연결하는 방법 뿐이다. 이는 정석이긴 하나 글의 목적과는 다르므로 그것을 우회하는 편법은 Issues 를 사용하는 방법이다.

오른쪽 메뉴의 Settings 를 누른 후 Issues 를 체크하여 사용 가능토록 한다.
오른쪽 메뉴 상단에 Issues 메뉴가 생겼을 것이다. 클릭한 후 “New Issue” 를 선택한다.
제목은 아무거나 적을수 있지만 기왕 하는거 이미지를 넣을 포스트 제목을 넣는다.
그리고 이미지를 드래그 하여 글 란에 드랍한다.
Submit new issue 를 누른 후 이미지의 주소를 복사하여 글 안에 삽입한다. ![대체텍스트](http://이미지주소.jpg)

웹에서 모든게 가능한 Github Pages

Github Pages 를 제대로 로컬 컴퓨터에 설치하여 사용하는 것은 하루 이틀정도의 배움의 시간이 들어가지만 위의 방법을 사용하면 아주 초보 사용자도 많은 지식이 없이도 1시간 안에 블로깅 서비스를 사용 할 수 있다. 깃헙 페이지 서비스가 나에게 맞는지 테스팅 해본다면 위의 방법을 추천해드리고 싶다. 언제든지 해당 repo 를 삭제하면 되고 서비스가 맘에 든다면 CNAME 파일을 수정하여 독립 도메인 사용도 몇분안에 가능하다.

이미 블로깅을 하고 계시는 분이라면 이전글 “워드프레스에서 Jekyll로 마이그레이션” 글을 읽어보셔도 도움이 되실듯 하다.

기타 다른 사이트에 이미지를 올리고 링크하는 법도 있지만 issues 를 사용하는 방법이 가장 나은듯 싶다. 더 좋은 방법이 있다면 나눠주시기를 바란다. ↩
참고할만한 글들. kalkin7, nolboo ↩

난 10년된 워드프레스에서 Jekyll로 마이그레이션

Wed, 28 Jan 2015 02:31:39 +0000

Wordpress 를 사용한지 10년이다. 제로보드4 기반의 조그 블로깅을 시작으로 테터툴즈, 이글루스를 거쳐 워드프레스에 정착하게 된 이유는 앞의 Tool 들 보다 더 자유스러운 스킨/테마 편집과 단순 미려한 글 입력란이었다. 물론 워드프레스가 이렇게 오래간 성장할 것을 예상한건 아니었다. 기타 블로깅 툴과는 달리 코어부분을 더욱 탄탄하게 하며 플러그인과 테마들에게 높은 자유도를 준 것이 큰 장점으로 발전하지 않았나 싶다.

워드프레스의 이면

하지만 이러한 장점들을 누리기 위해서는 지불해야 하는 값이 따랐다.

설치형 블로그인 만큼 호스팅의 제약이 따른다.
설치형인 만큼 개인이 보안에 신경을 써야한다.
생각보다 플러그인 의존도가 높다.
위의 보안과 플러그인 때문에 주기적인 백업과 업데이트를 요한다.

또한 워드프레스가 꾸준한 성장과 발전을 해 나아가며 따라오는 장점과 단점이 확연히 갈렸다.

모든 유저가 성가시게 여겼던 업데이트나 보안의 자동화는 개선 되어가고 있지만 사용자 층이 넓어지고 인기를 얻다보니 스펨과 보안을 위협하는 것들이 많아졌다. 그 어느때 보다도 불안해졌다.
플러그인으로 해결해야 했던 기능들이 워드프레스 기본 기능으로 대체될 때의 호환성과 충돌을 고려해야 한다.
업데이트의 주기도 짧아서 몇개월 방치했다 돌아오면 기다리고 있는 많은 업데이트들이 테마/플러그인들의 수정이나 제작을 망설이게 한다.
전문적인 CMS 툴로 발전해가면서 점점 더 무거워지고 있다.
뿐만아니라 중요한 기능들을 담은 플러그인들이 유료화 되어가고 있다. 테마 또한 마찬가지 이다.

위의 모든것들이 개인이 단순히 블로그를 돌리기 위해서 신경 써야 하는 부분들이다. 상업적으로 사용되는 워드프레스로는 더욱이 그러하다. 순수히 글을 쓰도록 돕는 툴이 점점 글 이상으로 신경써야 할 것들이 많아지는 툴로 변화되고 있었다.

Github Pages 와의 만남

최근 몇년간 클라우드 키워드와 함께 드랍박스가 폭팔적으로 성장하면서 클라이언트 들에게 드랍박스를 이용한 무료 사이트를 구현해 주다가 또 다른 무료 서비스인 GitHub Pages 를 활용하는 법을 알게 되었다. Github Pages 서비스는 단순 html 지원 이상으로 Jekyll을 기반으로 하는 사이트를 무료로 돌릴 수 있었고 Liquid 을 사용한 테마가 가능한 블로깅이 된다는 뜻이었다.

Github Pages 서비스를 사용하여 Jekyll 블로깅이 가능하다는건 설치형 블로그를 사용하는 이들에게 제시할수 없었던 매력들을 선사했다.

보안에 신경을 꺼도된다. 단순한 static pages 만을 제공하니 매번 감행되는 패치나 업데이트가 사이트에 필요가 없다.
플러그인 의존도가 없거나 아주 적다. 기존에 사용하던 워드프레스의 기능들을 정확하게 구현하려면 플러그인을 사용할 수 있지만 없이도 왠만한 블로깅에 필요한 것들은 기본적으로 사용할 수 있다.
무료다. 생각보다 큰 장점인데 단순 매달/년 나가는 유지비 개념 이상으로 내가 더이상 호스팅이나 서비스를 이용하지 않으면 사라지게 되는 블로그가 이제는 외부의 영향 없이 반 영구적 유지 된다는 의미이다.

이 장점들을 통틀어서 표현하자면 내가 3년뒤에 찾아와 다시 글을 쓴다해도 보안/업데이트/플러그인/계정을 신경쓰지 않고 바로 이어서 글을 발행할 수 있다는 것이다. 컨텐츠를 생산해 내는 많은 블로거와 언론인들에게 이 보다 더 큰 매력이 있겠나 싶다. 이 외에도

워드프레스 만큼이나 디자인을 마음대로 주무를 수 있다. Liquid 을 사용하기에 배우기도 상당히 쉽다.
제작이 힘들다면 매력적인 테마들이 많다. http://jekyllthemes.org
단순 정적인 페이지를 출력하므로 로딩속도가 엄청나게 빠르다. 모바일에서 엄청난 위력을 발휘한다.
로딩속도 외에도 Static Page 의 매력은 개인적인 취향일 수 있지만 내가 처음 html을 배우던 1998년 처럼 순수 html 마크업만이 출력되는 사이트를 주무르는 카타르시스. 섹시하다.

내가 3년뒤에 찾아와 다시 글을 쓴다해도 보안/업데이트/플러그인/계정을 신경쓰지 않고 바로 이어서 글을 발행할 수 있다는 것이다.

Jekyll 입문

수개월이 지나고 호스팅 서비스가 끝나고서야 Github 서비스를 사용하기로 결심 했는데 미룬만큼 좋은점은 준비기간을 오래간 갖을수 있었다는 것이다. 이하의 팁들은 설치 자체를 자세히 나열하기 보다는 설치시 발생하는 실수와 직접 찾아야 했던 많은 정보들을 적으려 한다.

시작전 알아야 할 몇가지는

쉬운 입문의 서비스는 아니다. 진입장벽은 사람마다 차이가 있을 수 있지만 간단한 가입+블로깅 정도의 배움이 아니다. 개발자가 아니라면 하루나 이틀 정도의 공부가 필요하다고 본다. 개발자를 겨냥하여 쓴 글은 아니니 헛갈리는 부분은 질문과 함께 최대한 답변토록 하겠다. 배움 후에는 큰 만족을 줄꺼라 확신한다.
Github Pages 서비스를 사용하는 방법은 단순히 Jekyll 뿐만은 아니다. 이미 아시는 분들은 아시는 하루프레스와 Jekyll 의 프레임워크로 잘 알려진 문어프레스가 있다.
- 하루프레스는 Jekyll 과 컨셉은 비슷하지만 node 기반이다. 하루프레스를 통해 생성된 파일들이 Github Pages 로 deploy 되며 Jekyll은 파일들이 Github 안에서 자동으로 변환되므로 순서만 보자면 Jekyll 이 한 스탭 적은 샘이다. 2012년 개발이 멈추어져 있다.
- 문어 Octopus + Press Octopress 는 Jekyll 에 살을 붙인 프레임워크로 볼수 있다. 좀 더 쉬운 입문이 되겠지만 그만큼 불필요한 것들이 많이 딸려온다.
간단한 Github과 Git 사용법 그리고 Markdown 표기법을 알아야 한다.
- Git 명령어들을 사용하여 컴퓨터에 깔린 Jekyll 파일들을 자신의 github.com 으로 보내야 한다. Github 사이트의 사용법은 가입하며 금방 배울 수 있고 Git 은 Github 저장소로 내 보내는 명령어를 중심으로 몇가지만 배워도 블로깅에는 문제가 없을 정도로 쉽다. 워낙 유명하고 시간적으로도 많이 지나서 배울수 있는 곳이 많다. 꼭 알아야 할 기본중의 하나가 아닐까 싶다.¹
- Markdown 은 html 엘리먼트들을 직접 쓰지 않고 간단한 규칙들로 그것들을 표현할수 있게돕는 기법이다. 워낙 배움의 장벽이 낮아서 기본 html 마크업을 해본사람이면 10분이면 감을 잡을 수 있다. Markdown을 해석하는 여러 종류가 있으니 시작전에 잘 고르는것도 좋다.²
Static Page 특성상 자체내 댓글 기능을 제공할 수 없다. 다만 이를 보안해주는 Disqus 나 IntenseDebate 같은 서비스들을 활용하면 오히려 예전보다 더 좋은 댓글 시스탬을 갖출 수 있다. 디자인이 너무 일괄적이라는 것을 빼면.. 워드프레스의 댓글을 고스란히 옮길 수 있으므로 안심해도 된다. ³
이하의 설치 방법은 마이그레이션에 큰 도움이 될 local 컴퓨터에 설치해서 사용하는 방법이다. 아무 설치 없이 온라인에서 모든걸 적용 하는 방법 또한 가능하다. Git 명령어를 배우기는 담으로 미루고 바로 사이트를 시작하고 글을 쓰겠다고 한다면 곧바로 Jekyll Now 를 살펴볼 수 있다.⁴
- Github Pages는 사용해 보고 싶지만 터미널이나 명령어와는 친해지고 싶지 않을경우,
- Ruby나 Ruby Gem과 친해지기는 먼 훗날로 미루고 싶으며
- 윈도우를 사용하니 복잡한 설치과정을 거치기 싫다면 Jekyll Now 방법을 추천한다.
- (2015.1.28 수정) Jekyll, Git 을 몰라도 무료 Github Pages 즐기기 를 따라하시면 웹에서 바로 블로깅을 시작하실 수 있다.

설치

설치 방법의 큰 단계를 살펴보면 일단 git 명령어를 사용할 수 있다는 가정아래 크게는 3가지+마이그레이션 단계로 보면 편리하다.

첫번째 단계: 웹에서 실제로 보여질 공간을 만들고 유저의 컴퓨터가 그 공간과 연결이 잘 되어 있는가 확인하는 것.
두번째 단계: Jekyll 을 유저 컴퓨터에 설치하여 기본 파일들을 수정하고 그것들을 github 에 push 하는 것.
세번째 단계: 테마를 수정하고 글을 올려보는 것.
네번째 단계: 필요하다면 워드프레스에서 글을 옮겨오는 마이그레이션 migration 작업을 하는 것.

실제로 1번의 방법만 통과해도 단순 html, css, js 파일들을 손수 작업해서 올리면 인터넷에 자신만의 사이트를 무료로 돌릴 수 있다. 하지만 이 글의 목적은 블로그 글을 markdown 형식으로 적어서 github repository 에 push 하기만 하면 블로그가 스킨과 모든것을 입혀 업데이트 하도록 하는 것이다. 그러므로 나머지 두 단계가 아주 중요하다.

첫번째 단계

github 에 repository를 만들고 자신의 컴터와 연결하는 첫번째 단계는 pages.github.com 에 가면 아주 잘 설명이 되어 있는데, 주의 할 점은

User or organization site 을 선택하고 따라하되 새 repository를 만들때 repository 이름을 자신의 유저네임.github.io 라고 지어야 한다. 예를들어 ilmol.github.io 라고 지정해 놓아야 나중에 웹에서 접속시 http://ilmol.github.io 로 접속을 할 수 있다. 지시대로 잘 따라했다면 자신의 github pages 주소로 접속시 자신이 방금 만든 index.html 파일을 라이브로 볼수 있을 것이다.
Github 에 처음 가입했다면 이메일 인증을 꼭 해야한다. 이메일 인증없이 Page 를 사용할 수 없다.
단, 첫 push 후 웹에서 보이기까지는 몇분의 시간이 소요 될 수 있다.

두번째 단계

자신의 컴퓨터에 Jekyll 설치와 함께 기본 설정 파일들을 수정 한 후 github 과 연결 하는 것이다.

OS X 맥이라면 기본적으로 Ruby가 설치 되어 있으므로 상당히 쉬운 단계이다. 터미널 창에 ruby --version 명령어를 넣어서 Ruby 버전을 확인 한 후 bundler 가 설치되어 있지 않다면 gem install bundler 라고 명령 한 후 설치가 끝났다면 gem install github-pages 를 명령하여 설치하면 끝난다.
Jekyll 을 설치하는 것은 윈도우 환경에서는 공식 지원은 않지만 가능 하다. 복잡하니 링크 문서를 꼭 참고하기 바란다.
- 윈도우 버전의 Ruby를 다운로드 & 설치 하고,
- Ruby 버전에 맞는 DevKit 을 다운로드 & 설치한다.
- gem install jekyll 커멘드를 사용하여 Jekyll을 설치. Jekyll v1.4.3 버전은 설치불가하다.
- Syntax Highlighter 를 설치한다. gem install rouge
- 하지만 Jekyll 의 기본 highlighter 인 Pygments 를 설치하려면 Python 설치후 Pip을 설치, 그리고 Pygments 를 설치한다.
- Jekyll은 로컬에 서버를 가동하여 로컬에서도 라이브를 확인할 수 있다. Jekyll serve –watch 명령어 인데 이 부분을 가능케 하려면 wdm 을 설치해야한다. gem install wdm
- 윈도우에선 encoding 세팅을 잘 설정해주어야 한다.

설치를 마쳤다면 첫번째 단계에서 만들어 놓았던 유저이름.github.io 폴더에 터미널로 들어가서 Jekyll 을 실행한다.

jekyll build

여러 폴더가 기본적으로 설치 되는데 현 단계에서 확인해야 할 것들은

.gitignore 파일 - 숨겨진 파일 이므로 포든 파일이 보이도록 해야 보이는 파일이다. git 이 업데이트와 push 시에 무시하는 파일들 리스트이다. _site 와 .sass-cache 가 써져있는지 확인한다.
_config.yml 파일 - 기본 설정 파일이다.
- title: 은 사이트 제목.
- description: 사이트 설명
- baseurl: 프로젝트로 repository 이름을 다르게 해서 시험해 볼 사이트를 사용할 때에 경로를 적지만 바로 사이트를 라이브로 띄울 것이기 때문에 쓰지 않아도 된다.
- url: 기본 주소. 지금은 http://유저이름.github.io 가 되겠다. 후에 자신의 도메인을 쓴다면 도메인 주소가 들어가겠다.
- markdown: 기본세팅인 kramdown 을 유지해도 된다. ²
- permalink: 워드프레스를 쓰신다면 익숙한 주소형식이다. pretty 로 세팅하는걸 추천한다. 참고로 이곳은 permalink 주소 수정후 마지막에 .html을 붙였다. 더 자세히 수정을 원한다면 Jekyll 사이트를 꼭 둘러보길 권한다.
- yml 파일에 어떤 이름으로 값을 설정하면 global 값으로 설정되어 어디든 {{ site.정한이름 }} 으로 부르면 출력된다.⁵
css 폴더안의 main.scss 와 _sass 폴더 안의 파일들의 관계.
- sass 를 사용해 보신 분이라면 쉽게 이해하실 수 있다. 다만 css 폴더 안의 main.scss 에서 특별한 경로없이 _sass 폴더안의 파일을 부를 수 있다. 예: @import "base";
- sass 를 전혀 모른다 하더래도 괜찮다. main.scss 에 평범한 css 를 삽입해도 전혀 문제가 되지 않는다.
- sass 프리프로세서를 모른다 하더래도 한가지 시도해보면 좋은 것은 css 를 몇가지로 나눠서 _sass 폴더에 담아보길 권한다.
Jekyll 은 라이브로 테스팅 가능하도록 기능을 제공한다. 터미널에서 jekyll serve 를 실행하면 자동적으로 파일들을 _site 폴더에 변환해서 임시 서버에 돌려준다. 브라우저 주소창에 http://0.0.0.0:4000 을 치게되면 사이트가 돌아가는것을 확인 할 수 있다.

세번째 단계 - 테마및 글쓰고 올리기

테마수정은 생각보다 쉽다. 물론 세부적인 기능을 구현하려면 몇가지 Liquid 명령어를 알아야 하지만 지금은 간단한 부분만 다루겠다.

중심파일들은 _layouts 와 _includes 에 들어있다. _includes 에는 html의 특정 부분을 나눠놓은 곳이고 _layouts 에는 html 파일들을 특정 형식대로 묶어 놓은 곳이다.

default.html 이 가장 기본적인 html 이다. 그 외의 html 파일에는 — 를 위 아래로 적고 중간에 불러야 하는 파일 이름을 적으면 된다.
```
  ---

  layout: default

  ---
```
liquid 문법에서는 {{ page.comments }} Output markup, 결과물을 나타내며 {% if site.정한이름 %} 는 Tag markup 나타낸다.

글쓰기는 _posts 폴더안의 첫번째 글, welcome-to-jekyll.markdown 을 수정하며 해 보겠다.

글은 언제나 년-월-일-글제목.markdown 으로 저장한다. .md .html도 가능하다.
Front-matter 라고 부르는 글은 상단의 — 안의 내용은 메타데이터로 Jekyll에게 알려줄 글의 기본 설정부분이다.
- layout: 은 알다시피 _layouts 안의 html 형식을 불러오는 것이다. 이 부분을 활용하면 수많은 스타일의 글을 작성해 낼 수 있다.
- title: 글 제목
- date: 글 작성 날짜 시간
- 이 외에도 categories, tag, author 등을 지정해 줄 수 있으며 이 값들은 테마 제작때 사용가능하다. 예: {{ page.정한이름 }}
markdown 문법으로 글을 써보자.⁶
이미지 삽입은 쉬운 방식은 아니다. 폴더를 만들어서 그곳에 이미지를 넣고 글 안에 makrdown 문법으로 주소를 적어주어야 하는데 상당한 불편함일 수 있다. 상대경로를 적을경우 이미지가 깨진다면 경로에 / 를 앞에 적었는지 확인하자. 예: ![대체텍스트](/폴더/이미지 주소)

글을 올리는 것은 단순히 github 의 repository 로 push 하는 것이다. 물론 jekyll 은 라이브 테스팅이 가능하니 push 전에 jekyll serve 를 돌려서 확인해보자.

git add .
git commit -m "설명"
git push origin master

네번째 단계 - 워드프레스에서 마이그레이션

마이그레이션 만으로도 글 한개가 족히 넘게 나오지만 어떻게든 넣어 보겠다. 마이그레이션의 3 단계를 살펴보자.

워드프레스에서 백업 다운로드.
마이그레이션에 필요한 Ruby Gem 설치.
설치한 Gem 을 이용하여 명령어를 실행. 글과 이미지들이 자동으로 폴더안에 저장된다.

참고로 댓글의 마이그레이션은 따로 진행해야 한다. 모든 글의 마이그레이션을 마친 후에 진행해도 문제가 되지 않는다. 단, 도메인 이전 전에 댓글 마이그레이션의 첫 부분인 Disqus 가입과 댓글 연결작업은 마쳐야 한다.

워드프레스에서 백업 다운로드는 쉽다. Admin 에 접속하면 왼쪽에 Tools -> Export 를 고른후 post 나 page 를 골라서 다운로드 받으면 된다.
마이그레이션에 필요한 Ruby Gem은 jekyll-import 라는 페키지 이다. 터미널에서 불러준다.
```
 gem install jekyll-import
```
터미널에서 블로그 폴더로 가서 이하의 명령어를 돌려준다. 단, 마지막 부분에 백업한 파일 경로와 이름이 동일한지 확인해야한다. 길지만 한줄의 명령어이다.
```
 ruby -rubygems -e 'require "jekyll-import"; JekyllImport::Importers::WordpressDotCom.run({ "source" => "wordpress.2015-01-25.xml" })'
```

제대로 돌아간다면 각 글들과 이미지를 블로그 폴더안에 삽입할 것이다. 혹시나 에러가 난다면 첫번째 단계인 워드프레스에서의 백업시 post 와 page 를 나누어서 백업 받은 후 명령어를 돌려보기를 권한다.

엑스트라 댓글 Comment 마이그레이션

댓글 마이그레이션은 가장 많이 쓰이는 Disqus 를 선택하여 진행 하였다. 위에서 언급 하였지만 댓글 마이그레이션은 기존에 사용하고 있는 주소, 도메인 이전 전에 진행되어야 한다.

Disqus 에 가입한다.
Disqus 의 형식을 따라 워드프레스 블로그를 지정해준다.
워드프레스에 Disqus 플러그인을 설치한다.
설치 후 Comments 메뉴 안의 Disqus 를 선택하여 로그인 한다.
로그인 시 댓글은 Disqus 로 바뀌었지만 기존의 댓글은 아직 적용이 안되어 있다.
Disqus 사이트로 돌아와서 Admin -> Discussions -> Import -> Wordpress 에서 이전에 워드프레스 글을 export 했던 파일을 올린다.
모든 업로드와 변환이 자동으로 마치면 Disqus 에서 알려준다.
optional (도메인을 이전한다.) 이하는 블로그 도메인을 github으로 이전한 후에 작업하는 순서이다.
Disqus 에서 각 글의 주소를 변경하는 방법이 몇가지가 있다.
- Discussions 클릭시 나오는 각각의 댓글 주소를 직접 수정하는 방법
- Discussion -> Edit 클릭 후 나오는 Domain Migration Wizard 클릭
- 혹은 Upload a URL map 을 선택하여 파일을 직접 수정해주는 방법.

Jekyll 에 Disqus 를 적용한다. _layouts 를 열어 post.html 에 삽입한다.

{% if page.comments %}
<section id="comments" role="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
//var disqus_developer = 1; // github 에 올리기 전 확인하고 싶다면 //를 지우고 명령어로 수정
var disqus_shortname = 'disqus 유저아이디'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
{% endif %}

그리고 각 글을 발행 할 시에 Front-Matter 에 comment: true 를 첨부한다.

Jekyll 을 사용해야 하는가

Jekyll 입문에서 언급했듯이 이 작업은 평범한 블로거에게는 벅찬 과정일수 있다. 하지만 워드프레스를 직접 설치하고 이용하는 사용자라면 충분히 하루 이틀이면 Jekyll 사용에 적응할수 있으리라 생각한다. 그만큼의 가치를 하는 것인가 묻는다면 난 충분하다고 생각한다. 그리고 마이그레이션을 단행했던 많은 유저들도 그러하다.⁷ 단 개개인의 필요와 역량및 우선순위가 다르니 사전에 충분한 검색 후에 마이그래이션 작업에 들어가기 바란다. 마이그레이션이 아니라면 모든 작업을 온라인에서 클릭과 타이핑 몇번으로도 가능하다.⁴

Jekyll 로 넘어오며 ilmol.com은 javascript 조차도 없는 html, css 로 사이트를 유지하겠다고 생각했다.⁸ 순수하게 찍혀 나오는 사이트가 좋기도 하지만 이 긴 글도 느린 컴퓨터에서, 구형 스마트폰에서도 빠르게 로딩이 되는 사실 자체가 좋다. 메뉴는 css 선택자를 이용해서 슬라이드 하도록 구현해 놓았고 google analytics 도 제외했다. 이제 documentation 발행에만 집중할 수 있다. 누구든지 이곳에 들리면 자질구래한것 없이 글 읽고 의견을 남기시도록 해 놓았다. 어느 누구에게도 어느 곳에도 구애받지 않고 글을 쓸수 있는 그것이 다다. 그리고 그걸 가장 이상적으로 가능한 곳이 2015년엔 아직 Jekyll의 Github 이라고 생각한다.

기타 참고 글

깃에 대해 배울수 있는 여러곳. Git-scm.com, git-간편안내서, Outsider ↩
기본적으로 kramdown 으로 설정되어있는데 GMS extension을 사용하기를 추천한다. 개인적으로 redcarpet 을 사용하고 있다. ↩ ↩²
Disqus 홈페이지에서 댓글 마이그래이션 서비스를 제공하니 적극 활용하는 것도 한 방법이다. 플러그인을 설치하면 된다. ↩
Jekyll, Git 을 몰라도 무료 Github Pages 즐기기 를 참고. ↩ ↩²
twitter, facebook 같은 값을 정해놓으면 어디서든지 출력 가능하다. ↩
참고할만한 글들. kalkin7, nolboo ↩
이전, 새 설치 모음글들. nolboo, Pueue, Yeoyou, Suminb, Jinolog, Si.mpli.st, alphafactory.co.kr ↩
이부분이 100% 가능할까 고민을 많이 하고 결정했다. 물론 Disqus 는 예외로… 사실 이러한 이유에서 댓글을 지우는 것도 고려했지만 SNS 로 대화 할수 있는 한계가 있다고 생각한다. ↩