이 글은 코알못의 스케치 플러그인 개발 도전기 (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



슬로워크의 스티비 팀에서는 디자인 작업을 할 때 스케치(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

포토샵은 디자이너뿐만 아니라 많은 사람이 사용하는 adobe사의 프로그램입니다. 그러나 포토샵을 사용하다 보면 저장을 하지 않으면 작업 파일을 날리는 일, 일일이 수작업을 해야 하는 일 등 좀 더 작업을 쉽고 빠르게 안전하게 할 수 없을까? 라는 생각이 듭니다. 특히나 포토샵을 사용하는 사람들에게 수시로 ctrl+s (저장 단축키)를 눌러주는 것은 정말 중요한 일입니다. 포토샵을 조금 더 유용하고 간편하게 쓸 수 있는 자동저장 방법과 포토샵 플러그인을 소개해드리겠습니다.


 


포토샵 CS6 버전부터는 자동저장(Auto Save) 기능이 생겼습니다. 포토샵을 작업해보신 분들이라면 누구나 공감하는 저장의 중요성. 이에 관해 조금이나마 여러분을 걱정을 덜어줄 기능이 자동저장입니다. 이 자동저장 기능은 사용자가 설정한 시간에 따라 자동으로 백업파일을 저장하고, 잘못 종료되었을 경우 마지막으로 백업된 시간으로 복원 파일을 불러와 줍니다. 물론 정상/비정상 종료를 정확히 인식하지 못하는 경우가 있어서 아직은 완벽하게 마음 놓고 저장을 안 해도 되는 기능은 아닙니다. 그렇지만 포토샵이 제공하는 보험기능이라고 생각하시고 설정해놓으시길 추천합니다. 


자동저장설정 방법은 <Edit-Preferences-File handling-File Saving Options>에서 설정할 수 있습니다. 몇 분 단위로 저장할 것인지에 대해서도 설정이 가능합니다. 



자동저장기능에 이어 작업을 좀 더 쉽고 빠르게 해주는 유용한 플러그인 몇 가지를 소개합니다.

포토샵 플러그인은 주로 사진 필터 위주의 플러그인이 주류를 이루었는데, 현재는 익스텐션 스크립트 기능으로 포토샵 패널로 끌어와 사용할 수 있습니다. 



1. CSS3PS (무료 / 다운로드 링크)

포토샵에서 생성한 레이어를 CSS3 변환하는 클라우드 서비스 기반 플러그인 입니다. 레이어 그룹 또는 레이어를 선택하고 한번의 클릭으로 변환할 수 있습니다. Gradient, Inner Shadow, Inner Glow, Outer Shadow, Outer Glow 등의 CSS3 속성으로 변환해줍니다. 변환 즉시 브라우저에서 결과를 확인하고 공유가 가능합니다. 무료 플러그인입니다. 




2. Flaticon (무료 / 다운로드 링크)

웹에서 제공하던 아이콘 찾기 기능을 그대로 포토샵 내에서 사용할 수 있습니다. 패널에 추가하여 키워드로 원하는 아이콘을 검색하여 작업물에 바로 적용할 수 있습니다. 




3. Cut and Slice me (무료 / 다운로드 링크)

각 이미지를 크기에 맞춰서 자르고 자동저장해주는 툴입니다. 레이어 앞에 간단한 기호를 삽입함으로써 다양한 저장옵션을 제공합니다. 간단한 예시를 보자면, 파일명 끝에 @를 붙여주면 투명한 PNG 파일로 잘라줍니다. 버튼은 _BTN 이라는 단어를 추가하면 상황에 따라 나누어 줍니다. 또한, 모든 해상도로 나누어서 저장된다는 점이 큰 장점인 플러그인입니다.




4. 2xscaler (무료 / 다운로드 링크)

아이콘 등을 두 배로 키워주는 레티나 대응에 적합한 플러그인입니다. 클릭 한 번으로 2배 확대, 축소를 해주는 단축키를 만들어줍니다.




5. Layrs (무료 / 다운로드 링크)

레이어 컨트롤2는 레이어 이름 편집, 사용되지 않는 효과 제거, 모든 레이어 효과를 평평하게, 빈 레이어 삭제, 스마트 오브젝트래스트화, 유사한 파일 및 폴더 찾기, 스마트 오브젝트로 변환 등 7가지 기능을 제공합니다. 실무에서 굉장히 활용도 높은 플러그인으로 작업 시에 많이 사용하게 되는 플러그인 중 하나입니다. 




6. guideguide (무료 / 다운로드 링크)

CS5부터 사용할 수 있습니다. 설정된 px(픽셀) 값을 기준으로 도판에 가이드라인을 생성시켜주는 역할을 합니다. 값을 입력하고 Make Grid를 눌러주면 가이드라인이 생성되는 것을 지켜볼 수 있습니다. 손쉽게 격자형 Grid를 생성할 수 있습니다.




7. Save Panel (유료, 무료 사용 옵션 제공 / 다운로드 링크)

작업 중이던 파일을 이미지로 저장할 때 이 플러그인으로 간단하게 저장할 수 있습니다. jpg를 쉽게 다양한 사이즈와 형태로 저장할 수 있습니다. 가격을 0으로 작성 후 다운로드하면 무료로 사용할 수 있습니다.



포토샵 CS6부터 적용이 가능한 자동저장 기능과 유용하게 활용 가능한 플러그인 7가지를 소개해드렸습니다. 포토샵 사용을 하면서 한번 씩 있었으면 좋겠다고 생각했던 기능들이 플러그인과 포토샵 자체 제공 프로그램으로 생기고 있습니다. 아직 완벽하지는 않지만, 작업시간을 조금이라도 단축해주고 편리하게 만들어 줄 수 있습니다. 하지만 플러그인과 자동저장기능만 믿다가는 작업에 놓치는 부분이 있을 수도 있으니 항상 저장하는 습관과 한 번 더 작업 결과물을 확인하고 종료해주세요. 


참조 : Korean Design Posts


by. 양 발자국

Posted by slowalk




디자인 에이전시는 늘 고객과 함께 소통해야 합니다. 그 소통의 중심에는 늘 디자인 시안이 있습니다. 만들어진 시안을 전달하고 그에 대한 의견을 듣고, 수정하고 완성하는 작업이 디자인 작업의 전반인데요. 웹디자인도 다르지 않습니다. 실제 화면에서 보이는 것과 같은 크기(픽셀)로 제작된 시안을 고객에게 전달하는 과정은 매우 중요합니다. 그래서 만들어진 슬로워크 프리뷰. 그 제작 과정을 알아봅니다. 


프리뷰, 왜 필요할까요?


웹디자인 의뢰를 받습니다. 기획, 정보설계가 확정되고 와이어프레임 단계를 거쳐 디자인 시안이 제작됩니다. 보통 2~3종의 다른 안을 준비하고, 메인페이지, 서브페이지를 나눠서 제작하는 경우도 있습니다. 화면에서 보이는 것과 똑같은 픽셀로 제작됩니다. 이런 이미지 파일을 고객에게 어떻게 전달할까요? 

이메일에 첨부 파일로 보냅니다. 고객이 다운로드 받아 열어보는데, 고객 PC의 이미지 보기 설정이 ‘화면 최대화’로 되어있네요. 그럼 우리가 정성 들여 만든 시안이 너무 크고 이상해 보일 겁니다. 어떤 고객은 정확한 배율로 열어 봤지만 가로 폭이나 좌우 여백이 마음에 들지 않습니다. 아무래도 이미지 뷰어와 브라우저에서 직접 보는 것은 큰 차이가 있기 때문입니다. 

이런 소통의 문제를 해결하기 위해 프리뷰 페이지를 만들게 되었습니다. 



프리뷰 페이지의 시작


이런 구성으로 초기 프리뷰 페이지를 제작했습니다. 간단한 html로 제작되었고, 몇 개의 이미지를 브라우저에서 실제와 같은 배율로 확인할 수 있도록 한 것이죠. 고객들에게 정확하게 시안을 전달할 수 있어 소통의 실수도 사라지고, 만족도도 높았습니다. 

첫 시안을 프리뷰에 올려 확인할 수 있는 URL을 고객에게 전달합니다. 이후 수정되는 시안을 디자인 팀에서 업데이트하면 같은 URL에서 확인하면 되니 고객 입장에서도 편리하다는 의견을 받았습니다. 



필요하긴 한데, 불편해요


그런데 프로젝트가 늘어나면서 계속 프리뷰 페이지를 만들다 보니 html 페이지를 만들고, 이미지에 링크를 걸고, FTP를 통해 서버에 업로드하는 반복 작업을 계속해야 했습니다. 여러 번 업데이트되는 시안은 계속 페이지가 늘어나게 되었고, 디자인에 더 집중해야 할 시간에 프리뷰 페이지 html 작업을 해야만 했습니다. 그리고 프로젝트마다 조금씩 다른 설정은 혼란스러웠고 코드를 다루다 실수라도 하게 되면 그 스트레스는 고스란히 디자이너의 몫이었습니다. 이런 반복된 작업과 실수를 막는 방법은 없을까? 고민을 하게 됩니다.



몇 가지 조건 


프리뷰 페이지는 프로젝트 진행에 꼭 필요하지만, 생성과 수정이 불편했습니다. 그리고 그간의 프로젝트들을 함께 모아보기도 어려운 구조였고, 이미지 파일도 서버의 여기저기에 흩어져 있었지요. 새로운 프리뷰 페이지의 몇 가지 조건을 만들었습니다. 


- 누구나 코드를 몰라도 페이지를 생성할 수 있어야 한다.

- 만들어진 프리뷰에 새로운 시안을 업데이트할 수 있어야 한다.

- 생성된 URL(주소)는 고객에게 전달하기 쉬워야 한다.

- 그간의 프로젝트 목록을 볼 수 있어야 한다. 단, 프로젝트 목록은 내부에서만 열람하도록 한다. 

- 모바일에서 잘 보여야 한다.



어떻게 쓰나요?


디자이너의 편의를 위한 html 작성이나 FTP 업로드 과정없이 브라우저에서 직접 올릴 수 있는 등록 페이지를 만들었습니다. 제목과 업로드 되는 이미지, 화면 구성은 최대한 결과물과 같도록 구성했습니다. 슬로워크 프리뷰의 주소 체계는 슬래시(‘/’)로 각 페이지를 구분하는데, 이 주소도 직접 설정할 수 있도록 했습니다. 





등록된 페이지는 언제든 수정할 수 있습니다. 올려진 시안을 삭제할 수 있고, 새로운 시안을 배치하고 업로드하기 편리하도록 했습니다.





고객에 보는 화면은 목록과 상세화면으로 이루어 지는데요. 목록에서 시안 제목과 이미지를 확인하고, 이를 클릭하면 브라우저에 100%로 확대된 이미지가 배치됩니다. 아직 움직이지 않는 시안이지만 앞으로 만들어질 웹사이트 화면을 확인할 수 있습니다. 





마무리


“고객과 소통하기 위한 장치를 우리 손으로 만들자”는 기획 아래 탄생한 슬로워크 프리뷰. 고객에게 정확하고, 보기 편한 시안을 전달해야 하는 것은 옳지만,  이를 위해서 들어가는 노력과 시간은 꽤 컸습니다.  “누군가의 편안함은 다른 누군가의 불편”이 될 수 밖에 없을까요? 슬로워크의 생각은 조금 다릅니다. 조금만 더 고민하면 좋은 것, 편안한 것은 함께 누릴 수 있고, 그렇게 절약된 시간과 노력은 더 좋은 일에 사용되어야 합니다. 그리고 무엇보다 슬로워크 프리뷰를 제작하면서 불편한 것을 직접 개선하기 위해 고민하는 소중한 시간을 가졌습니다. 

언젠가 슬로워크의 고객이 되신다면 만나실 겁니다. 슬로워크 프리뷰를 환영해 주세요.


by 북극곰 발자국


Posted by slowalk



웹사이트에 관심있는 분들은 한 번쯤 들어봤을 만한 “워드프레스”. 워드프레스하면 떠오르는 이미지들이 있습니다. 공짜, 쉽다(!), 누구나 할 수 있다, 다 된다, 오픈소스, 공유정신. 대부분 긍정적인 이미지로 쉽고 빠르게 원하는 웹사이트를 만들 수 있다는 생각을 하실 겁니다. 그리고 오픈소스라서 누구나 무료로 사용할 수 있고요. 그래서 그런지 중소기업이나 비영리기관,  공공기관, 그리고 프리랜서 디자이너들이 관심을 가지고 워드프레스를 사용하고 싶어합니다. 


쉽고, 빠르고 저렴한 웹사이트 만들기를 꿈꾸며 프로젝트를 시작하지만 어느 순간 난관에 봉착합니다. 당연히 될 줄 알았던 모바일웹사이트는 이상하게 깨지고, 검색엔진에 잘 걸릴 줄 알았는데 네이버에서는 제 웹사이트를 찾아볼 수 없습니다. 그리고 5분이면 설치할 수 있을 줄 알았는데, 자꾸 알 수 없는 에러 메시지를 만나게 됩니다. 


슬로워크 웹개발실에서 제작하는 대부분의 웹사이트는 워드프레스 기반으로 제작됩니다. 그간의 웹사이트 구축 경험을 모아 “워드프레스로 할 수 있는 것”에 대해 이야기해보겠습니다. 


누구나 쉽게 웹사이트를 만들 수 있다는데 사실인가요?


워드프레스는 오픈소스이므로 누구나 무료로 사용할 수 있습니다. 공식 웹사이트 wordpress.org에 가면 최신 설치 파일을 받을 수 있습니다. 그런데 이 파일을  올려서 설치할 호스팅(서버)이 필요합니다. 파일을 올릴 때는 FTP를 이용해서 올립니다. 올리고서 적당한 URL로 접속하여 설치를 해줘야 하는데 이 과정에서 MySQL접속 정보를 물어봅니다. 위 과정이 모두 이해 되시나요? 그렇다면 워드프레스를 “5분” 안에 설치하실 수 있는 분입니다. 만약에 좀 버거우시다면 웹서버 접속이나 환경에 대해 조금 더 학습이 필요하겠네요. 



유명한 "5분" 설치



워드프레스를 설치했습니다. 이제 완성된 웹사이트를 볼 수 있나요?


이제 막 워드프레스를 설치하셨다면, 웹사이트의 핵심구동 엔진을 설치하신 것입니다. 이제 “내가 원하는” 웹사이트를 만들기 위해서는 디자인과 기능을 담은 “테마”를 설치하고 추가적인 기능을 담은 “플러그인”을 설치하셔야 합니다. 이 단계부터는 FTP 등에 접속하지 않고도 관리자 모드에서 쉽게 클릭으로 설치하실 수 있습니다. 테마를 설치하고 만들고 싶은 순서대로 “페이지”를 만들고, “카테고리”를 만들어줘야 합니다. 또한 이것들을 엮어 “메뉴”도 생성해 주셔야 합니다. 그러면 텅 빈 웹사이트를 만들 수 있습니다. 



메뉴구성화면


워드프레스로 만든 웹사이트들은 디자인이 좋던데 아름다운 디자인을 제공하나요?


워드프레스 자체는 핵심 기능만 가지고 있는 “엔진”입니다. 원하는 모습을 만드실려면 적당한 테마를 설치해야 하는데요. 워드프레스가 좋은 디자인을 제공하는 것이 아니고, 워드프레스용 테마들이 아름답게 만들어진 것이지요. 무료로 배포하거나 유료로 판매하는 테마들은 대부분 어느 정도 이상의 디자인 퀄리티를 가지고 있습니다. 이들 중 취향에 맞는 테마를 골라 설치할 수 있는 것이지요. 하지만 이는 워드프레스가 가진 좋은 생태계이지 본연의 기능은 아닙니다. 여러분이 원하는 디자인의 테마를 찾으시거나 새로 만드셔야 취향에 맞는 아름다운 웹사이트가 탄생합니다. 물론 새로운 테마를 만들려면 PHP, HTML, CSS 등에 대한 지식이 필요합니다.



테마 검색 화면


자동으로 모바일 지원이 되나요?


원하는 테마를 선택해서 잘 설치했습니다. 이런 저런 페이지도 만들었고요. 그런데 스마트폰 화면으로 보니 화면이 이상하게 깨지네요…? 

워드프레스는 자동으로 모바일 지원을 하지는 않습니다. 대부분 테마들이 모바일 최적화가 되어 있는 경우이지요. 반응형웹이 적용된 테마나 모바일 전용 테마를 설치해야 모바일 지원이 됩니다. 물론 워드프레스의 관리자모드는 대부분의 기기에서 구동이 됩니다. 



모바일 최적화?
http://en.support.wordpress.com/themes/mobile-themes/


검색엔진 최적화가 된다던데?


검색엔진 네이버에서 내가 만든 홈페이지의 글 제목을 검색하지만 잘 검색이 되지 않습니다. 몇 페이지를 넘기니 그제서야 초라하게 링크가 걸려 있습니다. 워드프레스는  자동으로 검색엔진 최적화를 해준다는 어떻게 된 일일까요? 

워드프레스로 제작한 웹사이트의 콘텐츠들은 테마에 따라 다르겠지만 검색엔진이 수집하기 쉽게 규격화된 문서를 만들어 줍니다. 그런 문서들은 빠르게 검색엔진에 노출되고 여러가지 랭크 알고리즘에 따라 순차적으로 보이게 됩니다. 그러나 검색엔진 회사에서는 단순히 수집된 정보만을 보여주지는 않습니다. 자사의 노출 순서에 따라 순위를 결정하기 때문에 단순히 워드프레스로 만들면 검색엔진 최적화가 된다고 생각할 수는 없습니다. 


플러그인으로 모든 기능을 구현할 수 있나요?


수많은 플러그인을 가지고 있는 워드프레스는 다양한 기능을 플러그인 설치만으로 구현할 수 있습니다. 포럼을 만들 수도 있고, 유사 소셜네트워트를 구축할 수도 있습니다. 인기글 순위를 보여주는 위젯도 있고, 소셜관련 플러그인도 매우 다양합니다. 이렇게 다양하고 강력한 플러그인을 잘 선택하여 사용하면 매우 고품질의 웹사이트를 만들 수 있습니다. 하지만 무턱대고 플러그인을 설치하다 보면 경우에 따라서 웹사이트가 점점 느려져 사용이 불편할 수도 있습니다. 또한 서로 다른 개발자가 만든 플러그인이 상호 충돌을 일으켜 전혀 예상하지 못한 결과를 가져오기도 합니다. 플러그인을 이용할 때는 많은 검색과 신중한 설치가 중요합니다. 





보안에 강하다던데?


워드프레스는 지금 이 순간에도 전세계의 개발자들이 보완 작업을 진행하고 있습니다. 혹시 있을 수 있는 약점을 보완하고, 좀 더 편리하고 효율적인 기능을 제공하기 위해 지속적으로 업그레이드가 됩니다. 이 과정에서 사용자, 관리자 편의 기능뿐 아니라 보안 취약점도 지속적으로 보완이 되고 있습니다. 긴급한 보안 상황이 생길 경우에도 발 빠르게 대응을 해주고 있습니다. 웹사이트의 관리자가 “지속적으로 업그레이드만 해준다면” 보안상 문제가 생기는 경우는 없을 것입니다. 



꾸준한 업데이트
http://codex.wordpress.org/WordPress_Versions



마치며


무엇이든 다 될 줄 알았던 워드프레스. 손쉬운 설치와 운영, 관리로 많은 사랑을 받고 있지만 뭐든지 쉽게 할 수 있는 만능 도구는 아닙니다. 고품질의 웹사이트 제작을 위해선느 어느 정도의 추가 개발이 필요합니다. 그렇다고 전문가만 다룰 수 있는 어려운 도구는 더더욱 아닙니다. 인터넷에 널려 있는 관련 정보를 통해 학습하면, 자신만의 웹사이트를 직접 만들 수 있게 해주는 좋은 도구입니다. 꾸준한 관심을 가지고 활용법을 익혀나간다면 디자인 포트폴리오부터 기업 웹사이트까지 다양한 웹사이트를 만들 수 있습니다. 이런 좋은 도구를 잘 활용해서 자신만의 웹사이트를 만들어 보는 것은 어떨까요. 





by 북극곰 발자국




Posted by slowalk