Wit In Web

2014년 봄 정도부터 시작했던 블로그입니다. 어쩌다 텀블러에 정착을 하게되면서 블로그를 본격적으로 시작하게 되었습니다. 벌써 2년이 흘렀습니다. 아시는분은 아시겠지만 혼자하는 블로그는 아니고, 위트인웹이라고 부르는 그룹 멤버들이 함께 쓰는 블로그였습니다. 애초 혼자 기술블로그를 자주 쓰기 힘드니 두명이서 함께 써보자는 취지에서 시작했습니다. 시간이 꽤 흘러 자립할 수 있는 수준이 되었다고 생각했고 미디움으로 터전을 옮겨 각자 글을 써나가기로 했습니다. 아래 링크를 참고하세요~

https://medium.com/@jeongwooahn

by 공잠

슬랙으로 친구들에게 메세지를 쓰다가 길어질것 같아 포스팅으로 옮겨왔다. 

1. 오호 이글 재미있다. 새 프로젝트도 힘든데, 프레임워크를 변경하는건 더 힘들듯. 그래도 가끔씩 약간 무모하더라도 들이대는게 중요할때도 있다. 그다음 들이댐은 좀 더 나을 테니까. 한 번도 도전하지 않다가 갑자기 하려면 절대 하기 힘들다. https://brunch.co.kr/@matthew-chang/14

2.  요즘 @schemr 덕분에 개발자로서 지내는게 다시 재미있어진다. 그의 주도로 리액트 스터디를 하고 있다. 공부라는건 뭔가 살아있는 느낌을 들게 한다. 물론 이건 경쟁을 강요하는 현 체제에서 우위에 올라가고 있다는 안심아닌 안심일 수도 있겠다. 그런데 그것보다, 내가 꼭 금전적으로 이득을 얻지 않는다 하더라도 기술로 먹고사는 사람은 이렇게 기술의 역동적인 변화를 느끼고 있는것이 중요하지 않나 생각된다.

3. 최근에 ‘나이가 들어가면 역시 개발보다는 관리쪽인가’ 라는 생각이 스멀스멀 올라왔었다. 불과 3개월 사이에 그렇게 생각이 오락가락 했다. 지난 3개월동안 개발일과 약간의 매니징같은 업무를 병행하다가 다시 균형을 잡아야 된다는 생각이 들어 개발에 집중하고 있다. 사실 관리업무 자체를 해본적이 없는 나로서는 3개월 간의 짧은 시간이지만 꽤 조직 운영에 대한 인사이트가 생긴 시기이다. 

4. 결국 대부분의 회사에서 오버매니징을 하고 있지는 않은지 생각해봐야한다. 극단적으로 얘기하면 관리자가 따로 존재하는게 맞느냐는 생각으로 또 발전하고 있다. 물론 있는것이 맞겠지만 어떤 경우엔 조직을 암으로 만들어버리는 매니징을 많이 볼 수 있는데 그런 경우 차라리 없는게 나을 수도 있다는 얘기다. 대부분 한국의 정상적인 지식노동자들은 스스로 자율적으로 조직을 운영하는 능력이 충분히 있다. 아무도 그 사실을 인정하지 않으려해서 그런거지. 

특히 시작할때 보았던 문서들 중 도움이 많이 되었던 글들만 추려서 링크해봅니다. 모두 한글 문서들입니다. 혹시 시작하실때 도움이 되실분들이 있을것 같아서요. 최대한 순서대로 정리해본것입니다.

나온지 얼마되지도 않은 기술인데도 많은 분들이 좋은 글들을 번역 및 정리해주신 덕분에 많은 도움이 되고 있습니다. 감사드립니다.

리액트 시작해보기

React 시작하기

ES2015와 React

재사용 UI컴포넌트 설계

React.js의 데이터 흐름

FLUX와 REDUX

Redux 공식홈페이지(한글)

Redux로의 카툰안내서

핫 리로딩(hot reloading)과 시간 여행 디버깅(time travel debugging)이 도대체 무엇일까?

웹은 균일하지 않다. 

여전히 자바스크립트가 제거된 환경이나, 인터넷 속도가 빠르지않은 환경 등 다양한 환경이 있고 각각 다른 사용자경험이 존재. 단계적향상이 여전히 웹에  필요한거 아닌가 생각하게 만드는 글입니다. 

https://medium.com/@fox/the-web-isn-t-uniform-fd67eb631501#.ggpkz2jm2

Font Face Observer

브라우저는 웹폰트를 다운로드하는 동안 다르게 행동합니다. 웹폰트가 다운로드되는 동안 어떤 브라우저는 텍스트를 숨기고, 다른 브라우저는 즉시 대체 폰트를 보여줍니다. 이것은 일반적으로 Flash Of Invisible Text(FOIT)와 Flash Of Unstyled Text(FOUT) 말합니다.

이를 개선하기 위해 font-display이라는 새로운 속성이 생겼지만 아직 지원하는 브라우저가 없습니다. 이 글은 **Font Face Observer**라는 라이브러리를 통하여 'font-display'와 동일한 동작을 구현하는 방법을 소개합니다.

사이트에 처음 방문하였을 때 폰트를 캐싱하여 다른 페이지에서는 즉시 폰트를 적용하는 방법이 인상깊네요. 사용자 경험을 개선하려는 노력이 감동적입니다.

https://www.bramstein.com/writing/web-font-loading-patterns.html?utm_source=CSS-Weekly&utm_campaign=Issue-211&utm_medium=email#custom-font-display

CoffeeScript와 ES2015에 대한 생각

“Babel 같은 도구도 있고, 모던 브라우저들, Node.js까지 최근에 6버전을 내면서 ES2015의 지원률을 90% 이상으로 끌어올린 마당에 더 이상 새로운 프로젝트에 CoffeeScript를 도입할 이유가 없다. CoffeeScript에 있는 편리한 문법(e.g. Arrow functions, Classes)들이 ES2015에도 포함되어있고, destructuring 같은 것은 ES2015에서 먼저 도입했다가 나중에 CoffeeScript에도 도입이 된 녀석이다. CoffeeScript는 [0..n] 같이 일부 편리한 문법을 제공하지만 이런 건 그냥 코드 몇 줄 더 적어도 상관없고, 뭣하면 함수로 구현해두면 된다.”

http://blog.weirdx.io/post/26583

ES2015 cheatsheet

ES2015(ES6)의 Tip & Tricks, 좋은 활용사례들과 코드 예제들이 포함된 cheatsheet입니다.

https://github.com/DrkSephy/es6-cheatsheet/blob/master/README_ko.md

스타트업의 Product/market fit 측정하는 방법

+10% WoW성정, NPS 50이상, 매일 50%이상의 사람들이 제품을 다시 사용할때 http://www.andrewahn.co/silicon-valley/the-only-thing-that-matters/

디자인 스프린트(DESIGN SPRINT)

디자이너가 주도해서 기획자와 개발자간의 협업이 필요한 프로세스, 서비스 준비하고 있다면 시도해볼만한 사이클이네요. 

http://goo.gl/EnUQZv

실리콘밸리의 한국인 2016 영상

http://tvcast.naver.com/startupalliance/playlists

내가 생각하는 좋은 글쓰기의 예(개발자)

이전에 신문사에서 함께 일하던 친구(지금도 여전히 일하고 있는)의 개발블로그입니다. 물론 개발자가 아니면 읽기 힘들 수 있지만 술술 읽히는 느낌이 좋아요. 물론 개인적인 느낌입니다만. 생각이 잘 정리가 되어있고 그 생각을 주욱 글로 옮겨놓은 느낌이랄까. 암튼 좋은 글쓰기란 뭘까라는 생각에서 공유합니다. http://mytory.net/2016/05/02/drupal-vs-laravel.html

크롬 50버전 기준 개발자도구 팁! 

http://umaar.github.io/devtools-animated-2016/#/

스타트업 top 10 도서 목록

나름대로 데이터 분석을 기반으로 뽑은 명서입니다. 

원문 : http://www.andrewahn.co/silicon-valley/startup-reading-list/

번역되어 나온 책은 링크를 찾아서 아래 목록에 넣었습니다. 참고하세요.

The Lean Startup 린스타트업 by eric ries http://goo.gl/SK50A9

The Hard Thing About Hard Things 하드씽 http://goo.gl/9XlebR

Innovator's Dilemma 혁신기업의 딜레마 http://goo.gl/4LfQy7

Zero To One 제로 투 원 http://goo.gl/05VCdM

How to Win Friends and Influence People 데일 카테기 인간관계론 http://goo.gl/T3yB8b (국내 가장 최근 출간책 기준)

Thinking, Fast and Slow 생각에 관한 생각 http://goo.gl/0FQ8RL

The Power of Habit 습관의 힘 http://goo.gl/xO1nBG

The Design of Everyday Things 감성디자인 http://goo.gl/FXp5Za 이 책은 정말 강추강추!

Hackers & Painters 해커와 화가 http://goo.gl/80uALg 아쉽게도 절판이네요.

Creativity Inc 창의성을 지휘하라 http://goo.gl/C7nKtB

Lean UX & Agile UX :: 소개와 실제 적용사례

글은 재미있지만, 사실 이 글만으로는 인사이트를 얻기가 쉽지는 않습니다. pxd처럼 필요하면 타 회사의 리더들에게 컨설팅이나 강연을 요청하는것이 가장 좋을 것 같습니다. 이런 투자는 전혀 아깝게 생각하면 안됩니다.

“good decisions come from experience. Experience comes from making bad decisions.” –Mark Twain

by 공잠

출근 시간을 이용해서 읽었고 2주 정도 걸렸습니다. 자리잡고 느긋하게 봤다면 하루안에 볼 수 있을 정도로 술술 잘 읽히는 책입니다. 

<소프트웨어 장인> (산드로 마쿠소 지음, 길벗)

‘장인'이라는 단어가 조금 거슬립니다. 책에서 말하는 요지는 ’장인'이라는 단어보다는 오히려 ‘프로페셔널 정신’에 가깝다고 느껴집니다. 장인은 왠지 ‘방망이 깍던 노인'이라는 수필이 생각나게 하거든요. 적당히 괜찮은 방망이 하나를 의뢰하고 언능 받아서 부인에게 가져다주고 싶은 퇴근길의 남자의 입장에서는 이 노인은 참 곤란합니다. 저렴하지도 않을 뿐더러 차시간 때문에 빨리 받아가려고 노인을 계속 재촉해도 노인의 고집을 꺽지 못합니다. 자신의 방식대로 만들어야 제대로 만드는 것인데 노인에게는 대충이란것이 허용되지 않거든요. 이 노인이 보여주는 것이 장인정신이 아닌가 싶어요. 

산드로 마쿠소가 말하는 오버엔지니어링이 바로 이 노인의 ‘고집’ 즉 장인정신이 아닌가 싶어요. 장인의 정신은 예술가의 정신과 맞닿아 있습니다. 경지에 이르는 것이지요. 저자는 ‘프로그래밍은 예술이 아니’라고 강조하며 오버엔지니어링을 경계합니다. 게다가 재촉하기도 힘들고 가격도 비싼 장인의 작품은 소프트웨어의 세계에서는 어울리지 않지요. 아마도 이 책에서 말하는 ‘소프트웨어 장인'은 장인의 실력을 지향하면서도 실용주의적인 개발자를 말하는게 아닌가 싶습니다.

아무튼 ‘장인'이라는 단어가 거슬림에도 불구하고 숙련된, 시니어 개발자가 되고자하는 (시니어도 아니고 주니어도 아닌) 개발자들에게 많은 영감을 줍니다.

그리고 <실용주의 프로그래머>를 읽어야겠다고 생각했습니다.

후기는 여기까지, 아래 밑줄 친 문장들이 이 책에 대해 더 잘 말해줄 것 같네요.

47page

내가 지켜보았던 거의 대부분의 애자일 전환 프로젝트들은 부분적으로만 전환하는 문제를 안고 있었다. 기업들은 컨설턴트나 애자일 코치를 고용하여 개발 절차를 바꾸는 데는 도움을 받지만, 더 높은 품질의 소프트웨어를 작성하는데는 거의 도움이 안 되고 있다. 보통 애자일 전환은 절차에만 집중하고 사람들에 대한 기술적인 훈련에는 관심을 크게 두지 않는다.

49page

애자일 선언의 진정한 의미를 이해한 애자일 코치는 절차뿐만 아니라 기술적 탁월함도 강조한다. 대부분의 가이드가 절차에 집중되어 있을지라도 다른 영역의 프로페셔널과 함께 고객의 기술 훈련에도 주의를 기울인다.

159page

페어 프로그래밍 페어 프로그래밍을 하면 코드가 작성되자마자 그 품질에 대해 피드백을 받을 수 있다(보통 \'4개의 눈\'으로 검증한다고 말한다). 개발자가 테스트를 작성하거나 변수 이름을 짓는 순간 다른 개발자가 즉시 "이 부분은 이해가 안 됩니다. 어떤 의미죠?...."라고 말하며 ...피드백을 한다. 같은 페어끼리 너무 오래 있으면 효과가 적다. 하루 이틀 단위로 주기적으로 페어를 바꾸는 것이 좋다. 그렇게 하면 전체 시스템에 대한 이해도나 개발자의 스킬이 팀 차원에서 누적되어 올라간다. 더불어 코딩 표준을 정의하고 유지하는 데도 도움이 된다.

162page

리펙토링 엉망인 코드가 많을수록 엉망인 코드가 늘어나는 속도도 빨라진다. 이것은 '깨진 유리창 법칙'으로도 알려져 있다. 지저분하고 엉망인 애플리케이션은 개발자들을 느리게 만들고 그로 인해 비즈니스도 느려진다. 지속적으로 코드를 리펙토링하면 이러한 위험이 줄어든다. 코드에 손을 댈 때마다 지속적으로 코드를 가다듬는다. ... 레거시 애플리케이션을 대상으로 일을 할 때, 전체 시스템을 한꺼번에 새로 작성하고 싶은 욕구를 조심해야 한다. 이럴 때는 수정되는 부분에 한정해서 리펙토링을 집중하는 것이 더 나은 접근 방법이다. ... 몇 년 동안 바뀐적이 없는 부분을 리펙토링하는 것은 의미가 없다. 애당초 코드를 수정할 필요가 없다면, 리펙토링해야 할 이유도 없다. 리펙토링은 더 자주 변경되는 부분을 대상으로 시작해야한다. ... 유지보수가 쉬운 깨끗한 코드는 개발 속도를 높이고 버그가 만들어질 가능성을 낮춘다. 이것이 리펙토링의 비즈니스적인 가치다.

162page

by 공잠

마크다운 문서를 미디어위키 문법으로 변환하는 방법을 정리해봅니다.

온라인 변환도구

짧은 문서는 pondac 온라인 변환도구를 통해 쉽게 변환할 수 있습니다.

하지만 긴 문서는 일부만 변환하기 때문에 다른 방법을 사용하시거나 끊어서 변환하십시요. 제가 테스트 했을 때는 119줄까지 변환되는것으로 확인되었습니다.

atom 텍스트 에디터를 통한 변환

이 방법은 다소 복잡하나 한 번 설치하면 그 이후로는 쉽게 변환을 할 수 있습니다. 글 수 제한도 없습니다.

atom 에디터 설치하기 : https://atom.io/ 을 방문하여 설치프로그램을 다운받고 설치하십시요.

pandoc 설치하기 : http://pandoc.org/installing.html을 방문하여 pandoc 설치프로그램을 다운받고 설치하십시요.

atom 에디터를 실해한 후 Cmd+, 로 설정화면을 실행합니다.

설정화면에서 Install 메뉴를 클릭한 후 패키지 검색창에 pandoc-convert를 입력한 후 검색하여 pondoc-converter를 설치합니다.

변환할 md파일을 에디터에 불러오세요.

단축키 Cmd+Shift+p를 누르면 상단에 파레트 명령창이 나옵니다. 그곳에 ‘convert media’를 입력합니다. [그림1]

Pandoc Convert Mediawiki를 선택한 후 원하는 파일 이름을 지정하여 저장합니다. [그림2]

그림1

그림2

4월 3주에 위트인웹 멤버들 사이에서 공유되었던 링크들입니다.

슈퍼셀은 어떻게 180명으로 모바일게임 시장을 선도했을까? : COC만든 슈퍼셀의 성장이야기. 우리나라에서도 이런 게임 회사가 나왔으면..

다음 번 플랫폼은 채팅 : 개인적으로는 성급한 표현이 아닌가 싶네요. 성급하다고 말한 이유중 하나는, 예컨대 우리가 giphy의 짤방을 사용하려면 /giphy라는 명령어를 알아야하고, 플러그인도 설치해야한다는것. 사용자가 어떤 단어나 표현을 써야 특정 기능이 실행되는지를 정확히 알고 있지 않으면 사용하기 힘들다는것. 그래서 아래 기사에서도 '사용자들이 점점 프로그래머처럼 사고하고 타이핑하도록 훈련'된다면이라는 가정을 하고 있습니다. 과연 그것이 가능한 일일까요? 학습없이 자연스럽게 생활속에 묻어나가는 것이 미래 IT의 경향이지 그 반대가 아니지 않은가 싶네요.

일본은 스타트업의 불모지인가 : 이전 회사에서 카카오와 함께 일본 진출하려했다가 실패하는 걸 봤는데 그때도 일본 시장의 문제가 아니라 서비스에 문제로 실패한 것. 한국보다는 늦었지만 더 기대가 되는게 사실입니다.

페이스북, 개발자 누구나 머신러닝을 이용할 수 있는 ‘봇 엔진’ 공개 : 봇이 과연 얼마나 사용자에게 사용될지는 의문이지만 확실히 최근 가장 큰 이슈는 맞는거 같네요.

frozen sound - LEAN STARTUP : “회사는 배워야 한다. 잘못된 방향으로 열심히 달려봤자 낭떠러지에 더 빨리 도달할 뿐이다. 가설을 세워 조금씩 빠르게 테스트를 하고 결과를 통해 배우며 개선해 나가야 한다.”

위트인웹- css flex로 박스 수직정렬 응용 : flex를 이용한 박스 수직정렬을 응용한 내용의 설명과 예제

by 공잠

박스 세 개를 수직으로 정렬하고 싶다면, 간단합니다. 박스를 둘러싸고 있는 div에 display:flex와 flex-direction: column 을 설정하면 박스들이 수직정렬 될것입니다. 물론 flex는 모던 브라우저에서만 작동하니 잘 확인하길 바랍니다.

flex는 정렬에 있어서 너무나 탁월하고 간단합니다. 앞으로는 박스들의 정렬방식이 flex와 같은 방식으로 진행될거라 생각됩니다. 아무튼 위와 같은 경우에는 다음과 같이 구현해볼 수 있을 것입니다.

박스를 수직정렬할때 참 남감한 경우가 있었습니다. 두 개의 박스는 상단으로 정렬되고 하나의 박스는 하단으로 정렬하고 싶은 경우입니다. 아래 그림과 같이 말이죠.

flex-direction: column 설정으로는 위와 같은 케이스를 구현할 수 없습니다. 그리고 한 가지 가정을 더 하자면, position을 사용하지 않고서 구현해야 합니다. 모바일에서 키패드가 올라와서 세 번째 박스가 딸려 올라오는 상황을 원하지 않기 때문입니다. 테이블도 구현할 수 있겠지만 복잡하고 유연하지 않습니다.

오히려 flex-direction: row를 통해 구현할 수 있습니다.

4월 2주에 위트인웹 멤버들 사이에서 공유되었던 링크들입니다. 

TV방송사는 정말 몰락하는가? : 요즘 저는 TV, 케이블방송 대신에 다시보기 사이트나, 네플릭스, 구글무비를 보는데요. 가장 큰 이유는 내가 원하는걸 원하는 시점에 저렴하게 볼 수 있기 때문이죠.

(나와 함께) 성공할 스타트업 감별해내기 : 1. 제품, 2. 재무상태, 3. 투자자, 4. 팀 의 순으로 살펴보라고 조언하고 있습니다. '성공할'이 아니라 '좋은' 스타트업 감별해내기라면 무엇이 우선순위가될지 고민해볼만한 주제일듯합니다.

미국에서의 창업, 그 3년의 짧은 기록들 : ‘돈이 많거나 학벌이 좋거나 좋은 직장을 다녔다면 한 번 도전해서 실패해도 괜찮을 거다’라는 솔직한 후기가 마음에서 지워지질 않네요. 암튼 스타트업을 생각하고 있다면 읽어보시길.

미 정부, 공공데이터 시각화 페이지 공개 : 예전에 논문 쓸 때 데이터 찾느라 시간 엄청 쓰고 그랬는데 미국에서 이런 게 나왔네요. 

2016 실리콘밸리의 한국인 컨퍼런스 연사소개-VC편 : 4월 12일 "실리콘밸리의 한국인" 하네요. 이번에는 생중계는 없음. 대신 녹화방송을 네이버캐스트에 공개될 예정.

재사용 UI 컴포넌트 설계 :  많은 고민과 연습이 필요할것 같네요

3월 4주에 위트인웹 멤버들 사이에서 공유되었던 링크들입니다. 

스타트업과 와트니 법칙 : 실리콘밸리에 겨울이 오고 있다는 이야기. 빠른 성장보단 똑똑한 성장이 필요한 시기. 와트니 법칙(The Watney Rule)

[웹개발] 깨진 이미지 스타일링 : 깨진 이미지를 위한 센스! 그러나 브라우저 호환성이 아쉽습니다. 

“JPG와 PNG의 차이점은?” 기본적인 이미지 파일 형식 이해

이제 다운로드 숫자로 돈 버는 건 한계… 하나의 앱 안에서 놀게 하라 : 다운로드 숫자보다는 로얄티 있는 고객을 확보하는 것이 앱 시장에서 중요합니다.

서점의 미래로 불리는 하코다테 츠타야에 다녀오다 : 가고 싶은 서점 만들기

직장에서 동료들에 대해 (절대) 단정할 수 없는 5가지 : Todoist에서 한국어 블로그를 운영한다니 놀랍네요.

내 소득을 '키'로 나타낸다면? : 기술적으로도, 내용적으로도 참신하고 어썸한 시도!

님아, 16GB를 만들지 마오 : 아이폰 16G 출시를 고집하는 이유는 사용자를 아이클라우들에 묶어놓겠다는 애플의 의도를 꼬집은 기사.

정보과잉으로 지친 나를 도와줄 5가지 방법 : 정보의 홍수에서 집중과 선택을 할수 있는 연습이 필요할것 같네요

3월 3주에 위트인웹에서 공유되었던 링크들입니다.

[Amazon] AWS 월 비용 계산기, 서울 리전 지원 시작 : Asia-Pacific(Seoul)을 선택하면 요금계산 가능!

[Heeyeun] 디스플레이상에서 폰트의 크기, 굵기, 명도 : 폰트에 대한 심도 있는 글

[THEYBID] 페이스북 페이지 유료광고 스킬 5IVE

[영문] State of the Art JavaScript in 2016 : 코어 라이브러리로는 React, Application life cycle로는 Redux, 언어로는 ES6 + Babel, 스타일은 ESLint with Airbnb, 의존성 관리도구로는 npm, 빌드도구는 Webpack, 테스트는 Mocha+Chai+Sinon 이 승자.

3월 2주에 위트인웹에서 공유되었던 링크들입니다.

[김창준] 애자일 이야기 :  먼지봉투 없는 진공청소기로 유명한 기업 다이슨의 이야기. 재미있게 애자일의 철학을 풀어낸 글

[pdx] UX 디자이너는 코딩을 배워야 할까 : 적어도 웹 분야의 UX 디자이너라면 코딩을 배워야 한다! UX 는 디자인, 기획, 개발에 전반적인 지식이 있어야 한다고 생각.

[google] Android N 개발자 프리뷰 및 도구 : 새로운 안드로이드 N 버전의 개발자 프리뷰

[영문] 머터리얼 디자인 프레임웍/라이브러리 모음

[번역글] 2016년의 키워드는 대화형 커머스 : “2016년의 키워드는 대화형 커머스” 트위터의 해시태그를 고안한 크리스 메시나의 글의 번역글. 슬랙에서 giphy의 이미지들을 텍스트로 가져오는 것처럼 대화와 기능의 연결만이 아니라 더 나아가  미래의 사용자 인터페이스는 명령어 콘솔이 될 거라는 얘기가 인상적이다

최근 위트인웹 멤버들은 슬랙 채널을 만들어 웹과 관련된, 함께 읽어볼만한 글들을 공유하기 시작했습니다. 의외로 꽤 재미있고 좋은 글들이 많고 이것을 통해 꽤 배움을 나눌 수 있다는 것을 알게되었습니다. 공유된 글들중 일부를 블로그에도 1주 정도의 주기로 공유해볼 생각입니다.

3월 1주에 공유되었던 링크들입니다.

[ohyecloudy pnotes]#훌륭한습관 코드 commit(submit, check-in) 전에 diff : 커밋시에 시각적으로 diff를 보여주는 프로그램을 쓰자. 훌륭한 습관을 만드는데, 사용하는 프로그램이 많은 영향을 끼친다.

[HyunSeob]탁월한 프론트엔드 엔지니어가 되는 법 : 확실히 지식은 중요하고 어떤 때에는 치명적이다. 하지만 환경은 정말 빠르게 변화하기 때문에 지식을 얻는 방법은 이미 알고 있는 지식보다 항상 더욱 중요하다. 아마도 매일 문제를 해결하기 위해 지식을 활용하는 방법보다도 중요할 것이다.

[영문] How to avoid common UX traps : 당연한 UX의 기본을 간과시 하는 경향이 있는데 조금만 노력을 기울이면 형편없는 UX는 사라질듯

[위트인웹] 구글 Resizer 서비스 시작 : 데스크탑, 모바일, 태블릿에서 머터리얼 디자인 중단점 테스트가능한 인터렉티브 뷰어

카카오톡 기술 블로그 : 카카오톡도 기술블로그가 있었군. 최근 글중에 코드리뷰 관련글 재미있게 봤다.

[영문] 22가지 슬랙팁 : 요즘 회사와 모임에서 슬랙 많이 쓰고 있는데, 조금씩 재미있는 기능들 알아가는 맛이 있네요. 대화할때 강조나 코드조각, 인용 등을 넣을 수 있는 몇 가지 마크다운 기능이 있다는걸 첨 알았다.

[조영수] 여행정보 서비스가 흥하기 어려운 이유 : 새로운 서비스를 기획할 때 여행에 관한 것이라면, 참고해 보면 좋은 글! 그나저나 여행가고 싶다...

[신현묵] 소스코드 리뷰에 대한 짧은 이야기... : 짧지만은 않은 글이지만, 리뷰를 고민하고 있는 팀이라면 읽어보길. 이분글은 앞으로 계속 보려고 구독했음.

[혼디] 랜딩페이지의 전환을 높이기 위한 UX 가이드

by 공잠

미디움이라는 서비스는 이제 많이들 아시는 서비스일텐데요. 개인적으로는 장문의 글을 쉽게 쓰고 그 안에서 다양하게 커뮤니케이션 할 수 있는 도구로서 좋은 서비스라고 생각하고 있습니다. 미디움에서 사용하는 에디터역시 사용해보면 글쓰기에 집중 할 수 있도록 만들었다는것을 느낄수가 있습니다. 사실 지금 보고있는 이 텀블러 서비스도 몇 개월전에 미디움 스타일로 에디터가 변경되었습니다. 그 만큼 미디움 스타일이 장문의 글쓰기 사용자에게 사용성이 좋다는 것을 말해주는 것 같습니다. 

오늘 소개하는 MediumEditor는 미디움의 에디터의 기능들을 카피한 오픈소스 프로젝트입니다.

프론트 개발자라면 쉽게 깃소스를 통해 도입할 수 있으므로 자세한 설명은 생략합니다. 아직 미디움을 접하지 못한 분은 FullDemo를 통해 어떤 에디터인지 감을 잡으실 수 있을거예요.

MediumEditor에는 아직 이미지를 업로드하는 기능은 없는데요, 방법이 없지는 않습니다. jQuery insert plugin for MediumEditor라는 오픈소스가 MeduimEditor에 이미지나 유튜브 영상소스를 삽입할 수 있도록 도와줄 것입니다. 직접 insert모듈을 제작할 수도 있도록 되어있습니다. 역시 가이드가 잘 작성되어 있으므로 붙이는데 큰 어려움은 없으실 겁니다.

by 스키머

최근 구글 디자인 팀에서는 Resizer 서비스를 시작했습니다. 간략히 Resizer에 관한 내용을 정리했습니다.

Resizer 란?

Resizer는 데스크탑, 모바일, 태블릿에서 머터리얼 디자인 중단점(breakpoint)에 어떻게 응답하는지 테스트 할수 있는 인터렉티브 뷰어 입니다.

Resizer 중단점

이미 구글의 머터리얼 디자인 가이드에서 중단점에 대한 가이드를 제공하고 있습니다. 최적의 사용자 경험을 위해서 머터리얼 디자인의 사용자 인터페이스는 480, 600, 840, 960, 1280, 1440, 1600dp 의 레이아웃을 적용합니다. Resizer에서도 동일한 원칙으로 데스크탑, 모바일, 태블릿의 각 중단점을 제공합니다.

사용방법

Resizer에서는 사용자가 직접 URL을 입력해서 사용할 수 있으며, URL 입력 필드를 클릭하면 미리 등록된 몇개의 데모 사이트를 확인 할 수 있습니다. 웹사이트 접속후 상단 아이콘을 클릭해 데스크탑+모바일 / 데스크탑 / 모바일 화면을 볼수 있고, 사이트 상단에 있는 사이즈 바 에서 원하는 사이즈의 중단점을 클릭하여 변화하는 모습을 테스트 할 수 있습니다.

결론

이미 잘 알려진 반응형 웹 테스트 툴인 다음의 트로이나 Screenfly 등 다양한 에뮬레이터들과의 큰 차이점은 느끼지 못했습니다. 다만 Resizer는 머터리얼 디자인의 가이드라인을 기반으로 반응형 UI 의 표준 가이드를 제시하고 테스트 할수 있는 툴이라고 보여집니다.

참고

최근 위트인웹 멤버들은 슬랙 채널을 만들어 웹과 관련된, 함께 읽어볼만한 글들을 공유하기 시작했습니다. 의외로 꽤 재미있고 좋은 글들이 많고 이것을 통해 꽤 배움을 나눌 수 있다는 것을 알게되었습니다. 공유된 글들중 일부를 블로그에도 1주 정도의 주기로 공유해볼 생각입니다.

2월 4주에 공유되었던 링크들입니다.

[nothing special] 리액션 : 인생의 모든 것을 좋아할 순 없다 : 페이스북의 ‘싫어요'기능을 만들어달라는 요구에 대한 대안으로 ‘리액션' 기능을 만들게 되는데, 페이스북의 디자이너 디렉터가 그 과정을 블로그에 공개했고 이 글은 그것을 번역한 글이다. 이런 과정을 중요하게 생각하고 기록하며, 정리해서 블로그에 공개하는 행위 자체가 우리가 많이 배워야하는 점이다. 

[scottim]사용성 테스트, ‘질문’보다 ‘관찰’ : 말과 문서보다는 눈으로 더 많은 것을 알 수 있다는! 질문보다 관찰이 어려운것이다. 그리고 같은 저자의 글 “쿠팡 UX BIBLE & COMPLEX” 도 함께 읽어보시길.

[Rémi Parmentier] 미디어쿼리없이 반응형 이메일을 만드는 방법 : 구글과 같은 이메일에서 미디어쿼리를 지원하지 않는 것으로 알려져 있었는데, 잘 읽고 기억해둬야지.

[뉴욕타임즈] 래리 페이지의 집착, 구글을 움직이는 원동력 : 요즘 “서비스는 ‘장인정신’이 필수”라는 말에 공감하고 있는데, 이 글을 보니 래리 페이지는 구글의 장인인듯.

[Andrew Ahn] 핵심지표의 기준 : 요약하면, 너무 많은 데이터를 분석하는데 시간을 쓰고 있지 않은가, 회사의 상태를 가늠할 수 있는가, time-series로 표현할 수 있는가, 고객의 양과질을 판별할 수 있는가.

[슬로우뉴스] 현재의 문제는 현재의 도구로 해결한다: 데모크라시OS : 전세계에서 사용할 수 있는 오픈소스를 개발해 배포했다. 한 아르헨티나 활동가가 만든 재단이 개발했다. 와이 컴비네이터의 지원을 받으면서 화제가 되었음. 21세기에 여전히 구시대의 도구들로 민주주의가 유지되고 있다는 문제점에 착안하여 시작된 운동의 일환. 완전 동의한다. 현재 한국 과연 이런게 도입가능할까.