이 글은 코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기에서 이어지는 글입니다. 지난 글에서는 스케치(Sketch) 플러그인을 개발하기 위해 플러그인의 구조와 플러그인 개발을 위해 필요한 것들을 알아봤습니다.


이제 만들어보겠습니다.


  1. 스케치는 MacOS용 애플리케이션이며 플러그인도 MacOS에서만 개발할 수 있습니다. 이 글도 MacOS를 기준으로 작성됐습니다.
  2. 이 글은 스케치 플러그인 개발 방법을 설명하는 글이 아니라 말그대로 ‘개발 도전기'입니다. 코딩을 모르는 사람도 간단한 스케치 플러그인을 개발할 수 있다는 것을 전달하기 위한 것입니다.
  3. 코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기를 먼저 읽어보는 것을 권장합니다.



뭘 만들지?


개발 과정이 순탄하지 않겠지만, 가장 먼저 뭘 만들지 정해야 합니다. 가장 쉬운 방법은 내가 불편했던 것에서부터 시작하는 것입니다. 적어도 나한테는 필요한 것을 만드는 것이기 때문에 순탄하지 않은 개발 과정에서 동기부여가 될 뿐만 아니라 스스로가 사용자로서 기능에 대한 정확한 피드백을 줄 수 있기 때문입니다.


물론 더욱 많은 사람에게 필요한 게 무엇인지 생각해보면 좋겠지만, 이건 어디까지나 개발을 해본다는 것이 목적이기 때문에 너무 깊은 고민은 하지 않았습니다.


스케치를 사용하면서 불편하다고 느꼈던 것 중 하나는, 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export(내보내기) 할 수 없다는 것이었습니다. 다른 것들도 많았지만 그리 복잡한 로직이 필요하지 않아보였기 때문에 플러그인 개발 도전기의 대상으로 낙점했습니다. (물론 모든 기획이 이렇게 단순한 발상과 근거로 진행되지 않거니와, 이렇게 단순한 발상과 근거로 진행된다고 해서 꼭 좋은 결과로 이어지는 것도 아닙니다.)


그럼 “복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다"는 문제를 좀 더 자세히 알아보겠습니다.


우선 제가 저런 작업을 해야했던 이유는 다음과 같습니다.


스티비 런칭을 위한 초기버전 개발이 한창이던 때, 스케치로 와이어프레임을 만들고 이를 인비전(Invision)으로 Export 해서 디자이너, 개발자와 커뮤니케이션을 했었는데, 세부적인 기능이나 시나리오에 대한 정의를 전달하기 어렵다고 느꼈습니다. 그래서 스케치로 와이이프레임을 만들되, 인비전이 아닌 다른 도구를 활용하여 세부적인 기능이나 시나리오에 대한 정의를 전달하기로 했고, 결과적으로는 보편적인 방식인 - 벗어나고 싶었던 - “화면기획서"를, 구글 프레젠테이션으로 만들기로 했습니다.



누구를 위한 화면기획서인가



정리하면 다음과 같습니다.

  1. 스케치로 와이어프레임 제작 (1개 화면 = 1개 아트보드)
  2. 화면 단위인 아트보드를 이미지 파일로 Export
  3. 이미지 파일을 구글 프레젠테이션에 삽입하고 기능, 시나리오 등에 대한 상세 정의를 추가


이런 상황에서 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 것은 큰 불편을 초래했습니다. 아트보드를 복수 선택하는 것은 가능하지만 페이지를 복수 선택할 수는 없었기 때문에, 20여 개의 페이지를 하나씩 선택한 뒤 아트보드를 선택해서 Export 해야했습니다.


그래서 페이지를 하나씩 선택하지 않고 모든 아트보드를 한 번에 Export 할 수 있다면 좋겠다는 생각이 든 것이죠.



근데 이걸 꼭 내가 만들어야 하나?


이미 솔루션이 나와있다면 굳이 고생해서 만들 필요는 없겠죠. 그래서 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 문제를 해결할 수 있는 다른 솔루션은 없는지 찾아봤습니다.


  1. 이런 기능을 제공하는 플러그인이 있는지 찾아봤습니다. Export를 편리하게 하는 플러그인들이 있긴 했지만 복수의 페이지에 속한 모든 아트보드를 한 번에 Export하는 플러그인은 찾지 못했습니다.
  2. 스케치에 유사한 기능 - “Export Artboards to PDF”- 이 있다는 걸 알게됐습니다. 하지만 1) PDF로 저장된다는 점과 2) 선택한 페이지에 있는 아트보드만 Export 하기 때문에 결국 페이지를 하나씩 선택해가면서 Export해야한다는 점에서, 제가 느꼈던 문제를 완전히 해결해줄 수는 없었습니다.


1에서 유사한 플러그인이 있는지 찾아보는 것이 중요한 다른 이유는, 이런 플러그인에서 유사한 기능을 어떻게 구현했는지를 알면 내가 필요한 플러그인을 개발할 때도 도움이 되기 때문입니다.


여전히 과연 나 말고 누가 이런 기능을 필요로 하겠냐는 의구심이 들고 있지만, 어쨌든 나는 필요하고, 다른 솔루션은 없으니, 일단 만들어보기로 했습니다.



그럼 본격적으로 만들어보겠습니다.


일단 위에서 얘기한 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 문제를 해결할 수 있는 논리적인 과정을 생각해봤습니다.


  1. 플러그인을 실행합니다.
  2. 페이지를 조회합니다. (조회한 모든 페이지에 대해 A, B를 반복 실행합니다.)
    1. 페이지를 선택합니다.
    2. 선택한 페이지의 아트보드를 조회합니다. (조회한 모든 아트보드에 대해 I, II를 반복 실행합니다.)
      1. 아트보드를 선택합니다.
      2. Export 합니다.
  3. 플러그인을 종료합니다.


요는 2와 2-B의 반복실행 단계를 자동화한다는 것입니다.


그럼 먼저 위의 내용으로 구성한 코드를 살펴보겠습니다. 이해를 돕기위해 위의 내용을 그대로 주석으로 옮겼습니다. (스케치 플러그인의 파일 구조를 잘 모르겠다면 스케치 플러그인 개발 도전기 (1) - 시작하기를 먼저 읽어보세요.)



위 코드는 아직 동작하는 코드는 아닙니다. 일단 기본적인 내용으로 구성해본 것입니다. 실제로 동작하게 하려면 몇 가지 고려해야 할 것들이 있습니다.


  1. 스케치 플러그인으로 실행되기 위한 함수를 정의합니다. (모든 스케치 플러그인의 스크립트에 공통적으로 필요한 내용입니다.)
  2. 열려있는 스케치 문서를 조회합니다. (모든 스케치 플러그인의 스크립트에 공통적으로 필요한 내용입니다.)
  3. 아트보드에 미리 정의된 Export 설정값을 초기화합니다. (사용자가 Export 설정 값을 따로 정의해놨다면 저장되는 이미지마다 크기가 다를 수 있기 때문에, 이를 무시하기 위한 것입니다.) 방법은 다음과 같습니다.
    1. 선택한 아트보드를 복제합니다.
    2. 복제한 아트보드의 Export 설정값을 초기화합니다.
    3. 복제한 아트보드를 삭제합니다.
  4. 이미지를 저장할 경로를 정의합니다. 방법은 다음과 같습니다.
    1. 저장 경로에 사용하기 위해 페이지 이름을 조회합니다.
    2. 저장 경로에 사용하기 위해 아트보드 이름을 조회합니다.


그럼 위의 내용을 코드에 추가해보겠습니다. 역시 이해를 돕기위해 위의 내용을 그대로 주석으로 옮겼습니다.



아직 한 가지 빠진 게 있습니다. 바로 이미지를 저장할 경로를 정의하기 위해 사용자가 경로를 선택하는(파일을 저장할 때 파인더에서 폴더를 선택하는) 과정입니다.


완성된 코드입니다.



완성된 플러그인 패키지는 여기에서 내려받을 수 있습니다. 이미지 저장 경로 선택 및 호출과 Export 부분의 코드는 Quick Export를 참고했습니다.



스케치 플러그인 개발을 통해 얻은 것


안타깝게도 글을 쓰기 시작했던 시점과 달리, 지금은 스티비 팀의 개발 프로세스가 바뀌었고, 화면기획서를 만들고 있지 않고, 스케치로 작업한 모든 UI/GUI 관련 산출물은 제플린(Zeplin) 또는 인비전 인스펙트(Invision Inspect)로 Export 해서 확인하고 있습니다. 그래서 이번에 만든 플러그인은 이제 쓸 일이 없어졌습니다 (누군가에겐 쓸모가 있었으면 하지만 애초에 나 말고 누가 쓸까 하는 마음이었기 때문에 기대는 하지 않습니다.)


그럼에도 의미가 있었던 건, 코드에 대한 거부감을 줄일 수 있었다는 것입니다.


간단하게나마 스케치 플러그인을 개발해보면서 코드를 구성하는 논리적인 사고의 과정을 경험해볼 수 있었습니다. 문제점을 해결하기 위한 아이디어를 “문장의 나열"이 아닌 “논리적인 구조"로 만들어본다면, 개발자와의 커뮤니케이션이 한층 수월해지지 않을까요?


꼭 스케치 플러그인일 필요는 없습니다. 비개발자가 코딩을 비교적 쉽게 경험해볼 수 있는 다양한 도구가 존재합니다. 프레이머(Framer)도 그중 하나입니다. 자신의 필요에 맞게 - 화면기획서를 만들기 위해 스케치를 사용하면서 느꼈던 불편함에서 출발했던 이 글처럼 - 선택하면 됩니다. 일단 시작해보세요!



참고

The Beginner’s Guide to Writing Sketch Plugins Part 2 — User Notifications

Sketch Developer Reference

Quick Export


작성: 임호열

Posted by slowalk

최근 어린이 코딩 교육이 열풍이라고 합니다. 교육부에서도 2018년도부터 코딩 과목을 정규 교과목에 포함시키겠다는 입장을 발표했습니다. 한국만이 아닙니다. 미국, 영국, 핀란드 등 여러 국가에서 어린이 코딩 교육을 적극 권장하고 있습니다.


오바마 미국 대통령의 코딩교육 권장 동영상


어린이 코딩 교육은 말 그대로 어린이가 프로그래밍의 논리적인 과정을 배우면서 컴퓨팅적인 사고(Computational Thinking)를 할 수 있도록 하는 것입니다. 사교육 강국답게 한국에서는 벌써부터 코딩 과외, 코딩 학원, 심지어는 800만 원 짜리 코딩 캠프까지 등장하였습니다. 개인적으로 아이를 낳게 된다면 ‘수학, 영어만 시켜야지’라고 생각했는데 이제는 코딩까지 가르쳐야하나 하는 생각이 듭니다. 그러면서 코딩까지 배워야하는 요즘 어린이들이 불쌍해지기도 합니다. 누군가는 어린이들에게 의무적으로 가르치고 있을테고, 어린이들은 코딩으로도 경쟁으로 내몰릴 수 있을테니까요.


Photo(CC) via Pasco County Schools / flickr.com

 

개인적으로 코딩, 혹은 프로그래밍은 누군가의 가르침만으로는 배울 수 없는 것이라고 생각합니다. 기본 문법은 배울 수 있어도 결국 결과물의 구조를 짜고 기획하고 알고리즘을 만들어 내는 것은 ‘사고'에서 나오는 것이기 때문입니다. 다양한 외국어를 할 줄 안다고해서 말을 잘하는 것이 아닌 것처럼요. 이렇게 어린이 코딩 교육 열풍을 접하고 안타까운 마음이 든 저는 어린이 코딩 교육에 대해 더 찾아보게 되었습니다.


한국에서는

현재 한국에서는 다양한 방법으로 코딩 교육을 접할 수 있습니다. 기본적으로 학교에서 수업시간에 선생님이 진행하는 코딩 교육, 코딩 과외, 사설 코딩 학원 등이 있을 수 있으며, 좀더 다양한 방법으로도 전문적인 교육을 제공받을 수 있습니다.


소프트웨어야 놀자

네이버가 설립한 비영리 교육재단인 커넥트재단에서 운영하는 소프트웨어 교육 지원 서비스 입니다. 학습콘텐츠를 제공하고 코딩 교육에 관해서 행사도 운영하고 있습니다. ‘대학생 선생님과 함께하는 소프트웨어 교실’도 마련하여 소프트웨어와 코딩 교육에 익숙하지 않은 초등학생을 대상으로 쉽고 재밌게 소프트웨어를 배울 수 있는 기회를 제공합니다.


주니어 소프트웨어 아카데미

삼성전자에서 사회공헌의 일환으로 제공하는 소프트웨어 교육 지원 서비스입니다. 2013년 8월 여름 캠프와 2013년 2학기 46개교 시범교육을 시작으로, 2014년 1학기부터 연간 만 여명의 학생들에게 교육을 실시하고 있습니다. 방과후 교실, 주니어 소프트웨어 창작대회, 진로 멘토링 등을 제공하고 있습니다.


주니어 소프트웨어 창작대회 홍보영상


SW창의캠프

미래창조과학부가 주관하는 SW창의캠프는 학생과 학부모가 함께 소프트웨어를 경험하고 진로를 탐색할 수 있는 기회를 제공합니다. 약 한 달 간의 일정으로 진행되며 컴퓨팅 기반의 창의적 사고력, 문제해결력과 소통 능력을 기르는 것을 목표로 합니다.

SW창의캠프의 교육프로그램 구성, 사진 출처


이러한 코딩 교육은 보통 다양한 수업 도구를 활용합니다. 어린이 , 청소년에게 직접 프로그래밍 언어를 해당 언어에 맞는 문법과 구조를 사용하여 직접 소프트웨어나 어플리케이션을 개발하게 하는 것은 무리가 있고 흥미도 떨어뜨릴 수 있기 때문입니다. 아래와 같은 도구들이 있습니다.


크래치  

스크래치는 MIT 미디어랩의 Lifelong Kindergarten Group에서 운영하는 무료 서비스입니다. 주로 8~16세를 대상으로 만들어졌으며, 연령에 상관없이 이용할 수 있습니다.

스크래치로 만든 게임, 사진 출처


프로그래밍 언어를 배워서 문법과 특정 구문에 제한을 받으면서 코딩을 해야하는 것이 아니라, 블럭을 조립하는 듯한 직관적인 방식으로 프로그램을 완성해 갈 수 있습니다.


스크래치로 만든 지진 대비 생존가방 싸기 remix의 스크립트, 사진 출처


엔트리

국내에서 만들어진 엔트리라는 서비스도 있습니다. 학급 공유하기, 학년  별 교육자료 모음 등과 같이 학교 수업에서 활용할 수 있게 만들어진 것이 특징입니다.


엔트리로 만든 물고기 잡기 게임의 코드, 사진 출처


해외에서는

그렇다면 해외에서는 어떻게 코딩 교육을 진행하고 있을까요?


미국 - Code.org

미국의 오바마 대통령은 ‘게임을 하는 어린이'가 아니라 ‘게임을 만드는 어린이'가 되어야 한다며 코딩 교육의 중요성에 대해 말했습니다. 미국에서도 어린이 때부터 코딩 교육을 받아야 한다는 인식이 점점 커지고 있는 것인데요, 비영리 재단인 Code.org가 대표적으로 이를 실천하고 있습니다. Code.org는 미국 학생에게 컴퓨터 과학 학습을 독려하기 위해서 만들어진 비영리 조직에서 제공하는 서비스이며, 무료 코딩 수업과 코딩교육 관련 커리큘럼을 제공합니다.

또한 Code.org는 모두가 코딩을 배워야 한다는 생각에서 시작한 Hour of Code’ 프로젝트를 진행하고 있습니다. 'Hour of Code'는 전 세계 180개 이상의 국가에서 이루어지는 국제적인 운동으로, 한 시간 분량의 코딩 체험 동영상을 40여개 이상의 언어로 제공하고 있습니다. 누구나 Hour of Code 행사를 개최하고 운영할 수 있으며 우리나라에서는 대표적으로 코딩클럽에서 개최하고 있습니다.



Hour of code 프로젝트 홍보영상



영국 - Code Club


영국은 2014년은 '코드의 해(Year of Code)'로 지정하고 다양한 캠페인을 진행하였습니다. 코딩 교육의 정책화를 추진 중에 있으며, 이를 통해 어린이들은 5세부터 체계적인 교육을 받게 됩니다. 이러한 열풍에 힘입어 Code Club이 만들어졌습니다. Code Club은 영국에서 자체적으로 발생한 코딩 방과후 교육 프로그램으로, 현재는 구글 등의 지원을 받아 세계적으로 퍼져나가고 있습니다.


Code Club 소개 영상


핀란드 - Koodikoulu

핀란드에서도 코딩 교육에 대한 열기가 뜨겁습니다. 2016년부터 초등학교 정규 과목으로 코딩 교육을 실행한다고 발표를 했었으며, ‘코딩학교’인 Koodikoulu를 운영하고 있습니다. 4~8세 아동에게 무료 코딩 교육을 제공하며 2015년 10월 이후 운영하는 곳이 200개가 넘었다고 합니다.


Koodikoulu 소개 영상


개인적으로

현재의 코딩 교육에 대해 많이 알아보면서, 이 현실을 바라보는 안타까운 저의 마음이 기우였다는 생각도 들었습니다. 생각보다 어린이들에게 주입식 코딩 교육이 아닌, 조금 더 논리적으로 생각하고 IT시대를 조금 더 쉽게 이해할 수 있는 기회를 마련해 주는 것 같았습니다.

한편, 어린이 코딩 교육이 앞으로 어떤 방향으로 옮겨갈 지 모르고, 이러한 추세가 과연 옳은 것인지는 아직 판단할 수 없는 문제라는 생각이 들었습니다. 모두가 코딩을 할 수 있다면 좋겠지만 모두가 코딩을 ‘해야' 하는 것은 아닙니다. 모두가 컴퓨팅적인 사고를 해야 이 시대를 잘 살아갈 수 있는 것은 아닌 것이죠. 어린이에게 코딩이 필요한 목적이 무엇인가, 배우는 어린이는 관심있어 하는가, 흥미를 유도할 수 있는가 등 먼저 생각해 볼 문제들을 잊지 말아야 할 것입니다.


참고: 어린이 코딩 교육 一 네이버캐스트, IT 선진국, 코딩 교육에 주목하다! LG CNS블로그





작성: 김다래



Posted by slowalk



슬로워크의 스티비 팀에서는 디자인 작업을 할 때 스케치(Sketch)를 적극적으로 활용하고 있습니다. 와이어프레임을 만드는 일부터 GUI를 입히고 간단한 아이콘을 만드는 일까지, 스케치로 시작해서 스케치로 끝난다고 할 수 있을 정도입니다.


스티비 팀이 쓴 스케치 관련 글



스케치로 작업 중인 새로운 스티비의 와이어프레임(좌)과 GUI(우)



스케치를 사용하다보면 가끔씩 ‘이런 기능도 있으면 참 좋을텐데'하는 생각이 들 때가 있습니다. 이런 부족함을 충족시켜주는 것이 스케치의 플러그인*입니다. 스케치 외에도 대부분의 유사한 애플리케이션들(포토샵, 일러스트레이터 등)이 플러그인 기능을 가지고 있지만, 고작 6년 밖에 되지 않았고(26년 된 포토샵과 비교하면 ‘고작 6년’) 19명 밖에 되지 않는 작은 규모의 팀이 만들고 있는 스케치 입장에서, 플러그인의 다양성은 다른 애플리케이션들과의 경쟁에서 앞서나갈 수 있는 좋은 무기 중 하나일 것입니다.


* 플러그인이란 애플리케이션이 제공하지 않는 기능을 사용하기 위해 설치하는 일종의 확장 프로그램을 말합니다.



스케치 공식 홈페이지에는 무려 366개의 플러그인이 소개되고 있습니다. 이제 여기에 소개되는 일만 남았습니다!



스케치 플러그인을 직접 만들어볼 수는 없을까요?


아티스트라면 자신이 사용하는 도구 정도는 직접 만들 줄 알아야 한다는 말이 있듯이, 디지털 시대의 기획자라면 자신의 제품을 만드는 도구를 만들지는 못하더라도 그 도구의 손잡이 정도는 만들 수 있어야 하지 않을까 싶지만, 물론 코알못(‘코딩을 알지 못하는 사람’의 줄임말) 입장에서 플러그인을 만든다는 것은 손잡이는 커녕 정말이지 상상도 안 되고 감도 잡히지 않는 것입니다. 플러그인은 누군가 만들어놓은 걸 내려받아서 설치해서 사용해보기만 했지, 그걸 직접 만든다는 생각은 해본 적이 없으니까요.


하지만 스케치 플러그인은 비교적 접근하기 쉬운 CocoaScript*로 만들 수 있다는 사실에 약간의 흥미가 생겼고(정확히 말하면 두려움이 줄어들었다는 게 맞겠네요), 마침 개발 과정을 아주 쉽게 소개한 글을 발견하고 도전해보기로 했습니다.


* CocoaScript는 스케치가 실행되는 MacOS의 개발 언어인 Objective-C와 Cocoa의 코드를 비교적 쉬운 Javascript 문법으로 사용할 수 있게 해주는 프레임워크입니다.


그럼 시작합니다.


  1. 코알못이 무작정 도전해본 스케치 플러그인 개발 과정을 연재할 예정입니다. 코알못이 쓴 글이니 코알못이 아닌 분의 입장에서는 지루할 수 있습니다. 물론 저같은 코알못인 분의 입장에서도 지루할 수 있습니다.

  2. 스케치는 MacOS용 애플리케이션이며 플러그인도 MacOS에서만 개발할 수 있습니다. 이 글도 MacOS를 기준으로 작성됐습니다.

  3. 중간에 포기한다면 이 글이 마지막이 될 수도 있습니다.



준비하기


1. 텍스트 에디터를 설치합니다.

글을 쓰려면 노트가 필요하듯 코드를 쓰려면 에디터가 필요합니다. 프론트엔드 개발자들이 가장 많이 사용하는 에디터 중 하나인 Sublime Text 3를 추천합니다.


2. '콘솔(Console)'을 실행합니다.

디버깅(코드를 실행한 결과를 확인하는 과정)을 위해 MacOS의 기본 애플리케이션인 콘솔을 실행합니다. MacOS의 ‘Spotlight’(단축키 control+space)에서 ‘콘솔’ 또는 ‘console’을 검색하면 실행할 수 있습니다. 콘솔이 실행되면 왼쪽 사이드바에서 ‘리포트'의 ‘system.log’를 선택합니다. 여기에서 스케치 플러그인을 개발하면서 작성한 코드가 어떤 결과를 출력하는지 확인할 수 있습니다.


콘솔은 이렇게 생겼습니다. 외계어 같은 것이 써있네요. 검색 창에 ‘sketch plugin’를 입력하면 스케치 플러그인과 관련된 로그만 따로 볼 수 있습니다.



3. 스케치 플러그인 폴더를 찾아갑니다.

스케치 플러그인 폴더의 경로는 다음과 같습니다. (이 폴더는 스케치 플러그인을 개발하면서 자주 확인해야 하므로 파인더(Finder)의 즐겨찾기에 추가해두면 좋습니다.)

/사용자/[사용자 이름]/라이브러리/Application Support/com.bohemiancoding.sketch3/Plugins


이미 설치한 플러그인이 있다면 스케치 플러그인 폴더에 ‘.sketchplugin’이라는 확장자를 가진 파일이 있는 것을 확인할 수 있습니다.



플러그인 만들기


스케치 플러그인은 ‘.sketchplugin’이라는 확장자를 가진 패키지 파일로 존재합니다. 이미 설치한 플러그인이 있다면 ‘.sketchplugin’ 파일을 오른쪽 클릭한 뒤 ’패키지 내용 보기'를 선택하면 플러그인을 구성하는 파일들을 확인할 수 있습니다.


스케치 플러그인의 파일 구조는 다음과 같습니다.



‘.sketchplugin’ 아래 ‘Contents’ 폴더가 있고 그 아래 ‘Sketch’ 폴더가 있습니다. ‘Sketch’ 폴더 안에는 플러그인의 기본 정보를 담고있는 ‘manifest.json’ 파일과 플러그인이 실제로 작동하는 코드를 담고있는 js 파일이 있습니다.


위 구조를 참고하여 ’MyPlugin’이라는 샘플 플러그인을 만들어보겠습니다.


1. ‘Plugins’ 폴더 아래 ‘MyPlugin.sketchplugin’이라는 폴더를 만듭니다.


2. ‘MyPlugin.sketchplugin’을 오른쪽 클릭한 뒤 ’패키지 내용 보기'를 선택합니다. (‘MyPlugin.sketchplugin’은 확장자를 가지고 있기 때문에 더블클릭하면 파일이 실행됩니다. 폴더를 탐색하려면 ’패키지 내용 보기'를 선택해야 합니다.)




3. 이 안에 ’Contents’라는 폴더를 만듭니다.


4. ‘Contents’ 폴더 안에 ’Sketch’라는 폴더를 만듭니다.


5. 이제 ‘manifest.json’ 파일과 js 파일을 만들 차례입니다. js 파일의 이름은 편의상 ‘MyScript.js’로 하겠습니다. js 파일의 이름은 원하는대로 수정해도 되지만 ‘manifest.json’ 파일 안에 js 파일의 이름이 정의되어있기 때문에 함께 수정해야 합니다. 설치한 텍스트 에디터를 실행하고 각각 아래 코드들을 붙여넣어 저장합니다.


먼저 ‘manifest.json’ 파일입니다.



'manifest.json' 파일은 플러그인에 대한 기본적인 정보와 실제 플러그인을 실행하기 위한 플러그인 파일 정보, 스케치 애플리케이션에 표시할 메뉴 구성, 단축키, 플러그인 식별 값 등 일종의 트리거(trigger)를 담고 있습니다.


그리고 MyScript.js 파일입니다. js 파일의 이름을 수정하면 ‘menifesto.json’의 ’“script” : “MyScript.js”’ 부분을 함께 수정하면 됩니다.



'MyScript.js' 파일이 담고있는 이 코드가 실제로 플러그인이 동작하는 내용입니다. 코드의 내용에 대한 자세한 설명은 우선 건너뛰겠습니다. 



플러그인 실행하기


이제 스케치의 ’Plugins’ 메뉴를 열어보면 ’My Plugin’이라는 플러그인이 설치된 것을 확인할 수 있습니다. ‘My Plugin’의 ‘Get Page Names’를 선택하면 ‘MyScript.js’의 코드가 실행됩니다. 




플러그인 실행 결과 확인하기


플러그인이 실행된 결과는 ‘준비하기’ 단계에서 미리 열어놨던 콘솔에서 확인할 수 있습니다. 왼쪽 사이드바에서 ’리포트’의 ‘system.log’를 선택하면 나오는 화면에 아래와 같은 내용이 출력됐다면 플러그인이 정상적으로 실행된 것입니다.


플러그인을 실행할 때 선택되어있던 페이지 이름인 ‘Page 1’이 출력됐습니다!!



여기까지 문제없이 잘 따라오셨나요? 이제 스케치 플러그인을 생성하고 코드 실행 결과를 확인하는 방법을 알게 됐을 뿐입니다. 하지만 일단 이 과정을 이해했다면 적어도 다른 플러그인의 구조를 뜯어보는 것까지는 가능할 것입니다. 


이어지는 글에서는 플러그인을 통해 스케치의 기능을 어떻게 제어하는지, 그것을 코드로 어떻게 구현하는지 알아보겠습니다. 그 전까지 제가 포기하지 않는다면…



참고

The Beginner’s Guide to Writing Sketch Plugins Part 1 — Getting Started

Sketch Developer



Posted by slowalk



들어가며


“코딩하는 디자이너”, “코딩 교육 열풍 등 코딩에 대한 열기가 뜨겁습니다. 디자이너부터 어린이까지 코딩에 대한 관심이 커지고 있고, 전문 프로그래머뿐 아니라 누구나 코딩을 할 수 있다는 “생활코딩”까지. 코딩이 대중화되고 있는 시대입니다. 텍스트 에디터에 사용되는 코딩 전용 폰트에 대해 알아보려고 합니다. 


* 이 글은 "코딩 폰트 디자인기, Monoid"와 함께 읽으면 더욱 좋습니다.


코딩 폰트는 왜 필요할까요?


코딩을 할 때는 우리가 자주 사용하는 MS워드나 한글과는 조금 다른 폰트가 사용됩니다. 우리가 작성하는 모든 것들을 문서라고 한다면, 워드프로세서로 작성하여 출력된 문서, 블로그 포스팅, SNS의 짧은 글과 같은 문서들은 사람이 사람에게 전하는 말입니다. 하지만 코딩은 사람이 컴퓨터에게 전하는 말과 같습니다. 그래서 복잡한 프로그래밍 언어를 통해서 전달하는 것이지요. 그리고 사람은 맥락과 상황을 통해 ‘이렇게’ 말해도 ‘저렇게’ 이해할 수 있지만, 컴퓨터에게는 반드시 자신이 알 수 있는 언어와 문법으로 말해줘야 합니다. 

이렇게 정확하고 엄격한 말(명령)을 전달하는데 코딩 폰트가 매우 중요합니다. 복잡한 문법 속에서 길을 잃지 않도록 가독성이 뛰어나야 합니다. 비슷한 문자끼리 혼동되지 않도록 각 문자는 명확히 구별되어야 합니다. 사람 사이의 문서에는 많이 사용되지 않는 기호들이 많이 사용되므로 기호들도 정확하게 표현되어야 합니다. 



코딩 폰트는 고정폭





뚜렷한 가독성을 위해 코딩 폰트들은 모두 고정폭입니다. 사실 고정폭 폰트은 과거 인쇄술 초창기의 타자기에서 유래되었습니다. 서로 다른 넓이를 가진 문자끼리 겹치지 않고 정확히 타이핑하기 위해 등장했습니다. 

위 그림에서 상단은 일반 폰트(맑은 고딕)이고 하단은 코딩폰트(D2 Coding)입니다. 글자 뒤에 있는 상자의 넓이를 보면 일반 폰트은 각 문자의 모양에 따라 가변적이지만 코딩 폰트은 문자에 상관없이 넓이가 같습니다. 공백이나 물음표(?) 같은 특수문자도 같으며 한글은 정확히 2배의 넓이입니다. 일반 폰트은 문자와 단어, 문장 사이의 조화와 아름다움을 위해 문자와 상황에 알맞은 넓이로 표현됩니다. 반면 코딩 폰트은 조화보다는 가독성과 정확성을 위해 고정된 폭으로 표현합니다. 

특히 코딩에 있어 일관성 있는 공백(space)와 탭(tab)은 매우 중요합니다. 작성하는 사람이 읽기 쉬울 뿐 아니라 공백이나 탭 자체가 문법인 경우도 있습니다. 코드를 작성했을 때, 일반 폰트처럼 가변적으로 폭이 적용된다면, 여러 줄의 코드를 읽기 어렵고, 정리도 쉽지 않을 것입니다. 

윈도우 기본 폰트인 굴림과 돋움을 잘 아실 겁니다. 그런데 폰트을 설정하다 보면 ‘굴림’과 ‘굴림체’, ‘돋움’과 ‘돋움체’를 각각 선택할 수 있습니다. 시스템 오류나 혼용이 아닙니다. 각각 문서에서 적용했을 때 미묘하게 다른 분위기를 가지는데, 이 이 둘은 엄연히 다른 폰트입니다. ~체가 붙은 폰트이 앞서 말한 고정폭 폰트입니다. 반대로 ~체가 붙지 않는 폰트은 가변폭입니다. 즉, 좋은 코딩 폰트이 없다면 ‘굴림체’나 ‘돋움체’를 사용하는 것도 좋은 방법입니다. 



코딩을 도와주는 코딩 폰트 





코딩 폰트의 가독성과 정확성은 무엇을 말하는 걸까요. 위 그림을 보면 상단은 일반 폰트(맑은 고딕)이고, 하단은 코딩 폰트(D2coding)입니다. 같은 문자를 차례대로 쓴 것인데, 순서대로 숫자 1, 소문자 l(엘), 대문자 I(아이), 특수기호 |(pipe), 한글 자음 ㅣ(이)입니다. 일반 폰트에서 숫자 1은 폰트의 특성상 구분이 되지만 나머지 문자는 서로 구분해내기 어렵습니다. 사람의 눈에는 비슷해 보이는 l과 I를 컴퓨터는 명확히 구분합니다. 실수로 잘 못 입력한 값을 서로 구별이 되지 않는다면? 컴퓨터는 명령을 거부하고 코딩하는 사람은 힘들어지겠지요. 하지만 하단과 같은 코딩 폰트을 쓴다면 사람의 눈으로도 명확히 구분되므로 실수를 줄일 수 있습니다. 코딩 상의 실수를 줄여주고, 실수를 쉽게 찾을 수 있게 만들어주는 것이 코딩 폰트의 역할입니다. 



코딩 폰트 사용기 


그럼 어떤 코딩 폰트을 사용해야 할까요? 고정폭이라 비슷해 보이는 폰트들도 각자의 특성이 있어 사용자의 취향에 따라 달라질 수 있습니다. ‘코딩 폰트’ 등으로 검색하면 꽤 많은 폰트이 등장합니다. 어떤 폰트을 사용해야 할까요? 어떤 기준으로 선택해야 할까요? 아래는 각 폰트을 실제 코딩에 사용해보고 느낀 점을 정리한 것입니다. 


Courier New




Courier New는 윈도우에 기본으로 설치된 폰트로 대표적인 고정폭 폰트입니다. 과거 DOS의 기본 폰트인 Courier를 개선한 폰트이며, 텍스트 에디터나 콘솔 프로그램들이 기본 폰트로 지정해 놓은 경우가 많습니다. 

하지만 한글을 포함하고 있지 않아 한글은 굴림체나 돋움체로 표현되는데, 이 둘 간의 높이와 획굵기 등이 많이 달라 서로 이질감이 느껴집니다. 특히 작은 크기로 볼 때는 이 둘간의 이질감이 커서 가독성이 떨어져 불편했습니다. 

더 알아보기>


Dejavu Sans Mono





Dejavu는 고정폭 폰트뿐만 아니라 다양한 폰트군을 가지고 있습니다. 그 중 Mono가 고정폭을 가진 폰트입니다. 기본 폰트에 비해 부드럽고 섬세하여 눈의 피로가 적었습니다. 또한 작은 크기로 볼 때도 각 문자의 특성이 충분히 나타나 추천할만한 폰트입니다. 다만 한글 서체는 포함하지 않아 각 시스템의 기본 서체로 출력되는데, 에디터마다 그 비율이 다르게 표현되어 불편한 점이 있었습니다. 

다운로드 하기 >



Bitstream Vera Sans Mono





Dejavu와 외관상 차이는 없습니다. 하지만 한글과의 조화가 좋아서 꽤 오래 사용한 폰트입니다. 특히 한글 자음을 홀로 사용할 경우에도 균형있게 표현되어 추천할만한 폰트입니다. 오랜 기간 함께 했던 폰트이기도 합니다.

다운로드 하기 >



Hack





Hack은 그 이름에서도 알 수 있듯이 오직 코딩을 위해서 개발된 폰트입니다.  (https://github.com/chrissimpkins/Hack) 폰트의 소개를 살펴보면 Dejavu와 Bitstream Vera을 기반으로 새롭게 디자인했다고 합니다. Hack의 특징은 특수 기호에서 잘 나타납니다. 특히 코딩에서 매우 자주 사용되는 콤마(,)와 세미콜론(;)의 표현이 개성있는데, Bitstream에 비해 콤마의 끝이 더 안쪽으로 구부러져 구두점(.)이나 콜론(:)과 더욱 뚜렷한 차이를 보입니다. 작은 크기의 폰트로 코딩하면 콤마 대신 구두점을 찍는 실수를 하는 적이 많은데 이를 방지해 주는 세심한 폰트입니다. 

설치형 뿐 아니라 웹페이지에서 쓰일 수 있도록 웹폰트 CDN(저장소)도 제공하고 있습니다. 

다운로드 하기 >


나눔고딕코딩





잘 알려진 오픈 소스 폰트인 나눔서체의 코딩 전용 폰트입니다. 위의 여러 폰트과는 달리 국내 기업에서 개발하여 한글을 기본으로 지원합니다. 에디터 적용해 보면 상대적으로 날씬한 느낌을 주며 분위기는 Courier와 비슷합니다. 한글과의 균형이 좋고, 표현의 문제가 없는 점은 매우 강점이지만, 폰트의 굵기가 가늘어 가독성이 다소 떨어지고 각 문자가 서로 달라붙어 있는 느낌이 들어 눈이 피로했습니다. 

다운로드 하기 >



D2 Coding





네이버에서 최근 출시한 코딩 폰트로 위의 나눔고딕코딩을 개선한 디자인입니다. 상대적으로 굵어진 획은 각 문자를 더욱 뚜렷하게 보여줍니다. 영문자, 특수기호의 스타일이 크게 변화하여 기존 나눔고딕코딩보다는 Hack에 가깝게 보입니다. 이미 우수했던 한글과의 조화도 더욱 좋아졌습니다. Hack과 나눔고딕의 장점을 두루 갖춘 폰트이라고 생각합니다. 

웹폰트나 CDN은 제공하지 않지만 설치형 폰트만으로도 충분히 써볼만한 가치가 있어 추천해 드릴만 한 폰트입니다. 

다운로드 하기 >



더 알고 싶다면 


앞서 소개한 폰트 외에 더 많은 폰트을 보고 싶다면? What are the best programming fonts?를 참고하시기 바랍니다. 현재 전 세계의 코더들이 사랑하는 코딩 폰트들을 모아두었습니다. 어도비(Adobe)에서 배포하는 Source Code Pro, 리눅스 우분투(Ubuntu)에 쓰이는 Ubuntu Mono, 맥용 폰트인 Monaco, Melo는 물론 안드로이드 기기에 쓰이는 Droid Sans Mono 등 다양한 폰트과 소개, 다운로드 링크를 제공합니다. 



마치며 


무에서 유를 창조하는 코딩은 매우 즐겁고 창의적인 활동입니다. 이런 코딩을 더욱 즐겁고 편하게 해주는 것이 바로 코딩 폰트이 아닐까요. 무엇을 만드느냐도 중요하지만, 무엇으로 만드느냐도 중요합니다. 읽기 어렵고 다루기 어려운 기본 서체보다는 무료로 배포되고 있는 코딩 전용 폰트을 설치해 보시고, 즐거운 코딩을 하기 바랍니다.



참고 


- What are the best programming fonts?

- 네이버 d2 coding

- "글꼴" by 나무위키



by 북극곰 발자국 



Posted by slowalk

코딩할 때 어떤 폰트를 사용하시나요? 개인적으로 코딩의 시작은 에디터를 보기 좋게 세팅하는 일부터라고 생각하는데요, 장시간 에디터 화면을 봐야 하기 때문에 꽤 신중하게 폰트를 고르는 편입니다. 


코딩에는 일반적인 문서를 작성할 때와는 조금 다른 폰트를 사용하게 되는데요. 어떤 폰트를 선택하느냐의 기준은 저마다 다르겠지만, 코드 정렬을 위해 고정폭 폰트를, 작은 크기에서도 가독성이 좋고 문자들간의 구분이 잘 되는 폰트를 사용합니다. 마지막의 예를 들면, 숫자 0과 영문자 O, 대문자 I와 소문자 l 을 확실히 구별할 수 있는 것들 말이죠. Consolas, Monaco, Menlo, Source Code Pro 를 비롯하여, 프로그래머들이 애용하는 몇몇 '코딩용 폰트'들이 있습니다. 그 가운데, 새롭게 선보이는 Monoid를 소개합니다. 





Monoid는 이름의 mono에서도 알 수 있듯이 고정폭 폰트이며, 오픈소스 폰트라 누구나 사용이 가능합니다.이 폰트의 디자이너 Andreas Larsen는 일반적인 디자인의 생각과 조금 다른 접근으로 Monoid를 만들었다고 합니다. 그동안 라센은 다른 코딩용 폰트에 변형을 가하고 바꿔 사용하면서 자신만의 코딩용 폰트를 만들고 싶었습니다. 



타협

글꼴을 디자인 할 때, 한 번에 여러가지 문제를 해결하기도 하고, 한 가지 문제에 대한 답이 다른 문제와 충돌하기도 합니다. 그는 먼저, 디자인 프로세스 전반에서 일관성 있는 디자인을 선택하고, 명확한 초점을 유지할 수 있도록 목록을 작성하였습니다. 



우선순위

그는 자신만의 해석으로 Monoid와 함께 Fira Mono, Source Code와 Pragmata Pro 각각이 추구하는 최우선의 특징을 나열해보았습니다 . 이들은 서로 다른 특징을 가진 대표적인 글꼴입니다.




Fira Mono는 특히 큰 크기에서 예쁜 글자이며, Source Code Pro는 고정폭 폰트 계에서 팔방미인입니다. 어디에든 사용할 수 있지요. 또 다른 훌륭한 폰트인 Pragmata Pro는 가장 콤팩트하고 장평이 좁은 글꼴 중 하나입니다. 


그에 비해 Monoid는 어떤 폰트일까요? Monoid에는 다음과 같은 우선순위를 정했습니다. 

1. 읽기 쉬운 - 읽기 쉽고 문자를 구별하기 쉬워야 한다.

2. 조밀함 - 화면에 보다 많은 코드를 쓸 수 있어야 한다.

3. 예쁜 - 매일 몇 시간을 봐도 좋아야 한다.

 

다른 접근

그는 코딩에서 자신이 선호하는 줄 간격이 있다는 것으로 가독성에 우선순위를 두었습니다. 그 간격은 15px이었고, 특정한 크기의 그리드 안에서 Monoid가 매우 뚜렷하게 보이길 원했습니다. 


- Bitmap

비트맵 글꼴을 사용하면, 글리프를 만들기 위해서는 그리드에 적절히 픽셀을 채우면 됩니다. 특정 글자 크기에서 완벽하게 선명하다는 것이 장점이지만, 크기 조절의 단점이 있습니다. 



 



- 외곽선

벡터 방식의 외곽선 글자도 작게 축소할 때의 오차로 인한 부자연스러운 모양이 출력되기도 합니다. 힌팅은 외곽선 글자 정보인 힌트를 이용하여 가능한 그리드에 맞게 글꼴을 인위적으로 변형하는 것인데요. 이를 통해 글자의 출력 형태를 다듬어 보다 나은 결과물을 얻을 수 있습니다.  



Monoid의 방식

Monoid에는 위의 두가지 방식을 결합하여, 처음에 15px의 그리드에 맞게 외곽 글리프를 그렸습니다.





해상도를 제한하는 그리드에서 그리면,  M과 N처럼 동일한 폭이 되지만 결과적으로 비트맵에서의 선명도와 같이 15px에서 글자는 매우 분명해집니다.  



(위에서부터) Monoid, Fira Mono, Source Code Pro, Pragmata Pro








저는 가독성과 실용성, 심미성까지 갖춘 Monoid를 사용해보려고 에디터 설정을 바꿔보았습니다. 작은 글자에서부터 큰 글자까지 읽기에 무리가 없고, 무엇보다 몇 가지 줄간격 옵션이 있어 입맛에 맞게 다운로드할 수 있다는 점이 마음에 듭니다. 여러분도 한 번 사용해보세요!



출처 : Monoid, Medium


by 비숑 발자국


Posted by slowalk

From 0 to C

 

 

멀티미디어를 다루는 디자이너들이 늘어가고 있습니다.
 증강현실과 인터렉티브 디자인과 같은 첨단 환경을 통해 코더와 디자이너가 서로의 벽을 넘나드는 요즘, 흘러 넘치는 생각을 실현시키기 위해선 코딩을 이해하는 것이 중요합니다. 하지만, 태생부터 숫자와 친하지 않은 디자이너들... C언어 책을 앞에 두고 끙끙대다 결국,"난 창의적인 사람이라 이런 구조적인 일은 나랑 안맞아"라는 변명을 늘어놓는 사람들이 한둘이 아닙니다. 이런 이들에게 탁구공, 나무상자, M&M 초콜릿같이 주변에 있는 사물들로 코딩을 가르치는 사람들이 나타났습니다!

 

 

바로 네덜란드 
암스테르담에 위치한 Hello, Savants!의 Ubi de Feo입니다. 그는20년 넘게 코더로 일해온 자신의 경력을 살려 초보자들이 프로그래밍 언어라는 추상적인 개념을 컴퓨터와 책을 통해 이해하는 것이 아닌, 보고 만지며 이해할 수 있는 워크숍, From 0 to C을 통해 쉽게 이해할 수 있도록 만들었습니다.

 

 

from 0 to C from HELLO, SAVANTS! on Vimeo.

 

 

그의 워크숍은 조금 특이합니다.

먼저, 컴퓨터를 저~ 멀리 치우고, 모니터도, 전선도 모두 모두 저~ 멀리 치웁니다.
그리고 나무상자와, 탁구공, M&M 초콜릿같은 주변에서 흔히 볼 수 있는 물건들을 가져옵니다. 물컵도 좋고 연필도 좋습니다.

 

 



몸을 움직이는 수업을 진행하기 전 그는 학생들과 이야기를 나누며 숫자와 2진법에 대한 숫자의 세계에 대해 알려줍니다. 그리곤 컴퓨터가 수행하는 프로세스를 여러개의 스테이지로 구분해봅니다. 구분된 스테이지가 복잡해질 즈음, 학생들은 컴퓨터 부품을 대체한 역할을 맡게됩니다. 학생과 선생님은 각 스테이지를 돌아다니며 탁구공이나 M&M 초콜릿을 가지고 컴퓨터의 작동원리를 직접 손으로 놓아보기도 합니다. 이때 학생들은 간단한 프로그래밍 언어를 배웁니다. 액션스크립트나 자바스크립트도 같은 방법으로 적용되며 앞으로 사용될 프로그래밍 언어의 토대를 이해할 수 있습니다. 

 

 

그렇다면 어떻게 컴퓨터의 작동 원리를 
사물을 이용해 이해할 수 있을까요? 
예를들어, 탁구공은 2진법을 설명할때 사용됩니다. 4개의 구멍이 뚫린 상자를 제작하여 이 상자 2개로 1byte를 나타내는 방법입니다.(상자의 각 구멍은 1bit로 8bit=1byte입니다.)
이때 이 상자 가장자리에는 bit와 byte를 나타내는 표시자와 숫자를 표시, 이진법을 쉽게 알려줍니다.
이렇게 상자와 탁구공을 통해 '세는 방법'을 천천히 소화하는 과정에서 학생들은 수량을 가장 최적화된 방법으로 표현하는데 집중합니다.

 

 




프로그래밍 언어를 배울때 다양한 타입의 메모리'크기'에 대해 배울일이 많다고 합니다. 이때 byte를 '그리는' 방법을 배워 얼마나 많은 양의 데이터를 저장할 수 있는지 탁구공와 상자를 통해 'see' 볼 수 있다면, 여러분이 '크기'에 대한 개념을 이해하는게 더 쉬워질거라고 하네요.

 

 

 

이탈리아 Treviso의 Digital Accademia에서 열린 "From 0 to c" 워크숍

 

 

다른 예로 
M&M 초콜릿은 데이터의 양을 나타내기 위해 사용합니다. 그리고 컴퓨터상에서 사용하는 데이터의 공간과 데이터의 이동을 나타내기 위해 학생들끼리 서로 교환해보기도 합니다.

 

 



 

 

이렇게 시각적인 방법으로 컴퓨터에 대해 이해한 학생들에게 컴퓨터 언어를 가르치면 그때부터는 C언어나 액션스크립트, 자바스크립트 등 다양한 프로그래밍 언어를 문제 없이 받아들일 수 있다고 합니다.





그는 프로그래밍 천재를 만들고 싶기보단, 학생들이 문제를 해결해 나갈 자신이 다루는 언어가 무엇인지 알고 좋은 자세로 문제를 해결해나가는 방식을 가르치고싶다고 합니다.


그리고 무엇보다 여러해동안 학생들을 가르쳐오며 학생들과 얼만큼 높은 수준의 소통을 하느냐에 따라 학생이 배우고, 내용을 흡수하는 정도가 다르단것을 깨달았다고 하네요. 그래서 마치 고대 철학자들이 제자들에게 지식을 전해주는 방법처럼,  역시 수업시간에 학생들과 함께 몸을 움직이고 문답을 하며 프로그램을 진행한 것이  프로젝트의 성공의 열쇠였다고 합니다


좋은것들은(Good things) 자신이 하는 일을 좋아하는 미래의 프로그래머나 해커에게서 나올것이라 믿기때문에 이 프로그램을 어린 아이들이 이해할 수 있을 정도로 쉽게 만드는 것이 그의 목표라고 합니다.

프로그래밍이라는 어려운 개념을 구체적이고 시각적인 게임과 같은 과정으로 만든 그의 [프로세스 디자인]처럼 그동안 어렵게만 여겨 배우기를 포기했던 과학, 기술의 과정을 다른 방법으로 생각해보면 어떨까 하는 생각이 드는데요, 또 다른 재미난 방법으로 세상을 재밌게 만들어줄 그들의 프로젝트가 기대됩니다. 




| 출처 |  Hello, Savants! , From 0 to C , Wired_uk

by 사슴발자국





Posted by slowalk