radiofun

radiofun:

오늘(?) Stripe의 디자이너인 Benjamine De Cock이 공개한 js 라이브러리 uilang이 화제다. 공개하며 이면에 숨겨진 철학을 같이 이야기하는데, 이게 꽤 공감이 가는 이야기라 간략히 요약 공유. 

  • 몇년 전 처음 Javascript를 배웠을 때 jQuery가 꽤 좋은 진입점이라고 들어서 “쓰기 쉬운” 라이브러리를 써보려고 했을 때 대체 어디가 쉬운 건지… 특히 어떻게 개념적으로 접근해야 하는건지 몰랐었음. 완전히 새로운 ‘언어’들이었기 때문에.
  • uilang은 매우 제한적인 언어임. 대신 그렇게 제한을 둠으로 인해 이벤트 핸들링을 어떻게 접근해야 하는지 명확한 가이드를 줄 수 있게 됨. 엘레멘트를 선택해서, 이벤트를 듣고, 같은 엘레멘트나 다른 엘레멘트의 클래스에 변화를 주는 것이 전부임. 이 워크 플로우는 개발자들에게는 너무 뻔한 걸 수도 있겠지만, 일반 디자이너들이 단번에 이해하기에는 어려운 일이었음. 
  • 말하자면, getElementsbyTagName(‘div’).addClass(‘clicked’) 같은 ‘명령어’는 언어의 측면으로 봤을 땐 한번에 이해하기가 대단히 어려움. 그걸 “add a clicked state everytime user taps a div tag”같이 일반 대화문처럼 바꾸어주는 역할을 하는 것.
  • uilang을 시작점으로 삼아 언어를 쉽게 이해하고 다음 단계로 나가길 바라는데, js로 바로 연결이 쉽지 않기 때문에 http://transpiler.uilang.com/ 를 만들었음. 이건 uilang언어를 쓰면 바로 js 코드를 뱉어주는 툴임. 완벽하진 않지만, 도움이 될 것 : 여러번 쓰고 포팅된 걸 보다보면 대강 코드가 뭘 의미하는 지 알 수 있지 않을까…

정말 말 같은 명령문을 만들었다는 것이 놀랍다. 마치 글을 쓰듯 프로그래밍을 할 수 있는 것이 장점이고, (우리에겐 아직도) 영어라서 좀 문제이긴 하지만 그래도 난이도가 확 낮아진 느낌이다. 단, 현재까지는 용도가 매우 제한적이다. 가능한 건 오로지 ‘클릭’ 이벤트를 받아서 클래스를 붙였다가 떼었다가 하는 수준이다. 게다가 css transition과 transform은 알아서 해야 하기 때문에 (거기에 css 클래스 개념과  html tag까지도 물론 알고 있어야 함) 어찌 보면 ‘이걸로 뭘 하란 말이냐’ 라는 말이 나올수도 있겠지만, 아래와 같은 코드로 뭔가를 움직여 볼 수 있다는 것이 어디란 말이냐.

clicking on “.try-it" toggles class "hidden" on ".info-box

교육에 목적을 두었기 때문에, 딱히 복잡한 수준까지 지원을 끌어올리지 않은 듯. ‘정말’ 간단한 javascript 공부를 하고 싶다면 uilang은 좋은 대안이 될 것임. 

출시 24시간도 안되어 인스타그램에만 2만개 훌쩍 넘는 영상들이 올라온 Hyperlapse.

출퇴근길에 이래저래 테스트 하다보니, 아무리 보정이 잘된다고 해도 역시 안정된 촬영 자세/위치가 아니면 만족할만한 결과를 얻기는 힘들다. 인스타그램의 비디오 필터들이 마음에 안들어서 Cinamatic이나 Spark에서 효과+음악을 넣어보려 했으나, 이상하게 Hyperlapse에서 저장된 영상은 다른 앱에서 까맣게만 나온다. 분명 기본 앱이나 preview 상태에서는 잘 나오는데 문제가 뭔지 조금 더 테스트를 해봐야할 듯.

사실 독일의 지휘과에서는 실수로 ‘틀린’ 소리가 났을 때 곧바로 그 단원을 쳐다보지 않는 훈련을 한다. 그 단원은 이미 틀린 것을 스스로 알고 있을뿐더러, 쳐다보면 당황해서 연주하기가 더 힘들어지기 때문이다. 사람은 누구나 예상치 못한 소리가 들리면 그쪽으로 고개가 돌아가는 즉각적인 반응을 하게 마련이라서, 이것을 무디게 만들기까지는 꽤 오랜 시간의 훈련이 필요하다. 그러니 이런 훈련을 한 지휘자가 리허설 하는 것은 보통 연주의 ‘틀림’을 지적하는 게 아니라, 전체 음악의 조화를 위해 연주의 ‘다름’을 제안하는 것일 뿐이다.