슬로 워크 블로그 : : 코 알 못 의 스케치 플러그인 개발 도전기 ( 2 ) - 만들 기 
 코 알 못 의 스케치 플러그인 개발 도전기 ( 2 ) - 만들 기 
 2017 . 02 . 01 07 : 00 green media & tech . | 미디어 , 기술 
 이 글 은 코 알 못 의 스케치 플러그인 개발 도전기 ( 1 ) - 시작 하 기 에서 이어지 는 글 입니다 . 지난 글 에서 는 스케치 ( Sketch ) 플러그인 을 개발 하 기 위해 플러그인 의 구조 와 플러그인 개발 을 위해 필요 한 것 들 을 알 아 봤 습니다 . 
 이제 만들 어 보 겠 습니다 . 
 스케치 는 MacOS 용 애플리케이션 이 며 플러그인 도 MacOS 에서 만 개발 할 수 있 습니다 . 이 글 도 MacOS 를 기준 으로 작성 됐 습니다 . 
 이 글 은 스케치 플러그인 개발 방법 을 설명 하 는 글 이 아니 라 말 그대로 ‘ 개발 도전기 ' 입니다 . 코딩 을 모르 는 사람 도 간단 한 스케치 플러그인 을 개발 할 수 있 다는 것 을 전달 하 기 위한 것 입니다 . 
 코 알 못 의 스케치 플러그인 개발 도전기 ( 1 ) - 시작 하 기 를 먼저 읽 어 보 는 것 을 권장 합니다 . 
 뭘 만들 지 ? 
 개발 과정 이 순탄 하 지 않 겠 지만 , 가장 먼저 뭘 만들 지 정해야 합니다 . 가장 쉬운 방법 은 내 가 불편 했 던 것 에서부터 시작 하 는 것 입니다 . 적어도 나 한테 는 필요 한 것 을 만드 는 것 이 기 때문 에 순탄 하 지 않 은 개발 과정 에서 동기 부여 가 될 뿐 만 아니 라 스스로 가 사용자 로서 기능 에 대한 정확 한 피드백 을 줄 수 있 기 때문 입니다 . 
 물론 더욱 많 은 사람 에게 필요 한 게 무엇 인지 생각 해 보 면 좋 겠 지만 , 이건 어디 까지 나 개발 을 해 본다는 것 이 목적 이 기 때문 에 너무 깊 은 고민 은 하 지 않 았 습니다 . 
 스케치 를 사용 하 면서 불편 하 다고 느꼈 던 것 중 하나 는 , 복수 의 페이지 를 선택 해서 그 페이지 들 에 속한 아트 보드 를 한 번 에 Export ( 내보내 기 ) 할 수 없 다는 것 이 었 습니다 . 다른 것 들 도 많 았 지만 그리 복잡 한 로직 이 필요 하 지 않 아 보였 기 때문 에 플러그인 개발 도전기 의 대상 으로 낙점 했 습니다 . ( 물론 모든 기획 이 이렇게 단순 한 발상 과 근거 로 진행 되 지 않 거니와 , 이렇게 단순 한 발상 과 근거 로 진행 된다고 해서 꼭 좋 은 결과 로 이어지 는 것 도 아닙니다 . ) 
 그럼 “ 복수 의 페이지 를 선택 해서 그 페이지 들 에 속한 아트 보드 를 한 번 에 Export 할 수 없 다 " 는 문제 를 좀 더 자세히 알아보 겠 습니다 . 
 우선 제 가 저런 작업 을 해야 했 던 이유 는 다음 과 같 습니다 . 
 스티비 런 칭 을 위한 초기 버전 개발 이 한창 이 던 때 , 스케치 로 와이어 프레임 을 만들 고 이 를 인비 전 ( Invision ) 으로 Export 해서 디자이너 , 개발자 와 커뮤니케이션 을 했었 는데 , 세부 적 인 기능 이나 시나리오 에 대한 정의 를 전달 하 기 어렵 다고 느꼈 습니다 . 그래서 스케치 로 와 이이 프레임 을 만들 되 , 인비 전 이 아닌 다른 도구 를 활용 하 여 세부 적 인 기능 이나 시나리오 에 대한 정의 를 전달 하 기 로 했 고 , 결과 적 으로 는 보편 적 인 방식 인 - 벗어나 고 싶 었 던 - “ 화면 기획 서 " 를 , 구글 프레젠테이션 으로 만들 기 로 했 습니다 . 
 누구 를 위한 화면 기획 서 인가 
 화면 단위 인 아트 보드 를 이미지 파일 로 Export 
 이미지 파일 을 구글 프레젠테이션 에 삽입 하 고 기능 , 시나리오 등 에 대한 상세 정의 를 추가 
 이런 상황 에서 복수 의 페이지 를 선택 해서 그 페이지 들 에 속한 아트 보드 를 한 번 에 Export 할 수 없 다는 것 은 큰 불편 을 초래 했 습니다 . 아트 보드 를 복수 선택 하 는 것 은 가능 하 지만 페이지 를 복수 선택 할 수 는 없 었 기 때문 에 , 20 여 개 의 페이지 를 하나 씩 선택 한 뒤 아트 보드 를 선택 해서 Export 해야 했 습니다 . 
 그래서 페이지 를 하나 씩 선택 하 지 않 고 모든 아트 보드 를 한 번 에 Export 할 수 있 다면 좋 겠 다는 생각 이 든 것 이 죠 . 
 근데 이걸 꼭 내 가 만들 어야 하나 ? 
 이미 솔루션 이 나와 있 다면 굳이 고생 해서 만들 필요 는 없 겠 죠 . 그래서 복수 의 페이지 를 선택 해서 그 페이지 들 에 속한 아트 보드 를 한 번 에 Export 할 수 없 다는 문제 를 해결 할 수 있 는 다른 솔루션 은 없 는지 찾 아 봤 습니다 . 
 이런 기능 을 제공 하 는 플러그인 이 있 는지 찾 아 봤 습니다 . Export 를 편리 하 게 하 는 플러그 인 들 이 있 긴 했 지만 복수 의 페이지 에 속한 모든 아트 보드 를 한 번 에 Export 하 는 플러그인 은 찾 지 못했 습니다 . 
 스케치 에 유사 한 기능 - “ Export Artboards to PDF ” - 이 있 다는 걸 알 게 됐 습니다 . 하지만 1 ) PDF 로 저장 된다는 점 과 2 ) 선택 한 페이지 에 있 는 아트 보드만 Export 하 기 때문 에 결국 페이지 를 하나 씩 선택 해 가 면서 Export 해야 한다는 점 에서 , 제 가 느꼈 던 문제 를 완전히 해결 해 줄 수 는 없 었 습니다 . 
 1 에서 유사 한 플러그인 이 있 는지 찾아보 는 것 이 중요 한 다른 이유 는 , 이런 플러그인 에서 유사 한 기능 을 어떻게 구현 했 는지 를 알 면 내 가 필요 한 플러그인 을 개발 할 때 도 도움 이 되 기 때문 입니다 . 
 여전히 과연 나 말 고 누가 이런 기능 을 필요 로 하 겠 냐는 의구심 이 들 고 있 지만 , 어쨌든 나 는 필요 하 고 , 다른 솔루션 은 없 으니 , 일단 만들 어 보 기 로 했 습니다 . 
 그럼 본격 적 으로 만들 어 보 겠 습니다 . 
 일단 위 에서 얘기 한 복수 의 페이지 를 선택 해서 그 페이지 들 에 속한 아트 보드 를 한 번 에 Export 할 수 없 다는 문제 를 해결 할 수 있 는 논리 적 인 과정 을 생각 해 봤 습니다 . 
 플러그인 을 실행 합니다 . 
 페이지 를 조회 합니다 . ( 조회 한 모든 페이지 에 대해 A , B 를 반복 실행 합니다 . ) 
 페이지 를 선택 합니다 . 
 선택 한 페이지 의 아트 보드 를 조회 합니다 . ( 조회 한 모든 아트 보드 에 대해 I , II 를 반복 실행 합니다 . ) 
 아트 보드 를 선택 합니다 . 
 Export 합니다 . 
 플러그인 을 종료 합니다 . 
 요는 2 와 2 - B 의 반복 실행 단계 를 자동 화 한다는 것 입니다 . 
 그럼 먼저 위 의 내용 으로 구성 한 코드 를 살펴보 겠 습니다 . 이해 를 돕 기 위해 위 의 내용 을 그대로 주석 으로 옮겼 습니다 . ( 스케치 플러그인 의 파일 구조 를 잘 모르 겠 다면 스케치 플러그인 개발 도전기 ( 1 ) - 시작 하 기 를 먼저 읽 어 보 세요 . ) 
 위 코드 는 아직 동작 하 는 코드 는 아닙니다 . 일단 기본 적 인 내용 으로 구성 해 본 것 입니다 . 실제로 동작 하 게 하 려면 몇 가지 고려 해야 할 것 들 이 있 습니다 . 
 스케치 플러그인 으로 실행 되 기 위한 함수 를 정의 합니다 . ( 모든 스케치 플러그인 의 스크립트 에 공통 적 으로 필요 한 내용 입니다 . ) 
 열려 있 는 스케치 문서 를 조회 합니다 . ( 모든 스케치 플러그인 의 스크립트 에 공통 적 으로 필요 한 내용 입니다 . ) 
 아트 보드 에 미리 정의 된 Export 설정 값 을 초기 화 합니다 . ( 사용 자 가 Export 설정 값 을 따로 정의 해놨 다면 저장 되 는 이미지 마다 크기 가 다를 수 있 기 때문 에 , 이 를 무시 하 기 위한 것 입니다 . ) 방법 은 다음 과 같 습니다 . 
 선택 한 아트 보드 를 복제 합니다 . 
 복제 한 아트 보드 의 Export 설정 값 을 초기 화 합니다 . 
 복제 한 아트 보드 를 삭제 합니다 . 
 이미지 를 저장 할 경로 를 정의 합니다 . 방법 은 다음 과 같 습니다 . 
 저장 경로 에 사용 하 기 위해 페이지 이름 을 조회 합니다 . 
 저장 경로 에 사용 하 기 위해 아트 보드 이름 을 조회 합니다 . 
 그럼 위 의 내용 을 코드 에 추가 해 보 겠 습니다 . 역시 이해 를 돕 기 위해 위 의 내용 을 그대로 주석 으로 옮겼 습니다 . 
 아직 한 가지 빠진 게 있 습니다 . 바로 이미지 를 저장 할 경로 를 정의 하 기 위해 사용 자 가 경로 를 선택 하 는 ( 파일 을 저장 할 때 파인더 에서 폴더 를 선택 하 는 ) 과정 입니다 . 
 완성 된 코드 입니다 . 
 완성 된 플러그인 패키지 는 여기 에서 내려 받 을 수 있 습니다 . 이미지 저장 경로 선택 및 호출 과 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 
 TAG Prototype , sketch , UI , UX , 스케치 , 코딩 , 프로토 타이핑 , 플러그인 
 « 이전 1 · · · 63 64 65 66 67 68 69 70 71 · · · 2333 다음 »