디자이너를 위한 버전 관리 툴 2종 간단 리뷰

Abstract, Kactus 사용해보기

Junhyuk Jang
Jul 20, 2017 · 9 min read
이번엔 정말 마지막일까? hello UI kit by Freebo

최근 디자이너들의 Github을 표방하는 서비스가 하나 둘 씩 선보이고 있다. 코드 기반 프로토타이핑을 실무에 도입하면서 버전 관리의 중요성에 대해 적지 않은 공감을 하고 있었던터라, 이런 추세가 무척이나 반갑다.

실제로 기획자/디자이너들 중에서도 프로젝트 산출물을 Github이나 SourceTree로 관리하는 사례를 본 적이 있다. 하지만 일반적으로 개발자들을 위한 툴이라는 인식이 있고, 디자이너가 사용하기에 불편한 부분들, 예를 들어 예쁘지 않다거나, 예쁘지 않고, 예쁘지 않은 부분이 있기 때문에 디자이너를 위한 버전 관리 툴에 대한 니즈가 스멀스멀 새어나오고 있던 분위기였다.

그런 와중에 최근 주목할 만한 서비스 두 가지, AbstractKactus가 공개되었다. 과연 얼마나 쓰기 편한지, 얼마나 예쁜지(!) 한 번 확인해 보고 싶었다. (결과가 궁금하다면 마지막 3줄 요약을 바로 확인해도 된다.)

Abstract 사용해보기

앱을 실행하면, 우선 프로젝트를 생성하라는 안내문이 나온다. 심플한 내비게이션 구성에 과하지 않은 아이콘, 우선 첫 인상은 나쁘지 않다. 좌측 하단에 있는 유료 라이센스 안내는 애교로 봐준다.

프로젝트 이름과 설명을 입력하는 창. 프로젝트의 인덱스 색상을 선택할 수 있는데, 심지어 HEX 코드까지 지원하고 있다. 디자이너를 위한 툴이라 그런지 이런 세심함(!)이 돋보였다.

생성된 프로젝트는 카드형/목록형으로 확인이 가능하며, 참여하고 있는 사람들의 프로필 사진과 최근 업데이트 날짜/시간 정보가 표시된다. 프로젝트에 마우스를 가져가면 살짝 살짝 올라오는 느낌이 괜찮다.

프로젝트를 시작하려면 디자인 파일을 추가해야 한다. 그냥 가볍게 Drag & Drop으로도 파일 추가가 가능하다. 아직 시작한 디자인이 없다면, create sketch file을 선택해서 스케치 앱을 실행할 수도 있다. 프로젝트 멤버 초대도 가능하지만 우선 테스트하는 동안에는 스킵.

파일을 추가하면 페이지 단위로 구분하여 내용을 확인할 수 있으며, 파일 추가 및 수정을 할 수 있다. 그리고 여기서 페이지에 있는 아트보드 하나를 선택하면 뷰어가 열리게 된다.

뷰어에서는 해당 디자인에 대한 히스토리를 확인할 수 있으며 의견을 추가할 수 있다. 의견은 바로 추가할 수도 있고, 특정 영역을 지정하여 남길 수도 있다.

디자인에 대한 의견들은 프로젝트 첫 화면의 conversation 탭에서 모두 확인할 수 있으며, 이 탭에서 새로운 의견을 계속해서 주고 받을 수도 있다. 당연하게도 의견을 선택하면 어떤 디자인에 대한 내용인지 바로 뷰어로 연결된다.

그리고 버전 관리의 핵심이라고 할 수 있는 commits 탭에서는 그 동안의 모든 수정 사항들이 타임라인으로 표시된다. 타임라인에서 특정 항목을 선택하면, 어떤 내용이었는지 우측에서 바로 확인할 수 있다.

commits나 files 탭에서 ‘edit in sketch’ 버튼을 선택하여 바로 디자인 수정이 가능하다. 하지만 그 전에 branch를 만들지 않았다면 위 화면과 같은 팝업을 만나게 된다.

*각각의 branch는 다른 branch에 영향을 주지 않기 때문에 독립적인 개별 작업들을 동시에 진행할 수 있는 장점이 있다. 공동 작업에 반드시 필요한 기능이다!!

branch를 만들고 나면 드디어 스케치 앱이 열리고, abstract의 어떤 프로젝트에 해당하는 파일인지 하단에 계속 표시 된다. 물론 처음부터 branch를 만든 경우라면 스케치 앱으로 바로 연결된다.

수정 사항을 저장하면, 하단에 preview & commit 버튼이 활성화 된다.

스케치에서 commit 버튼을 선택하면, 다시 abstract로 복귀하여 방금 했던 작업의 제목과 내용을 입력하게 되고, 어떤 branch에 반영할지를 선택할 수 있다.

commit을 완료한 후, 해당 branch의 commits 탭에 방금 작업한 수정 사항이 보인다.

branch를 생성했다면 프로젝트 첫 화면에서 각각의 branch들을 한 눈에 확인할 수 있으며, 개별 branch들은 work in progress / open for feedback / ready for review 중에서 현재 상태값을 선택할 수 있다.

그리고 abstract에서의 활동들은 웹에서도 동일하게 확인할 수 있다. 파일 추가 및 수정을 제외하고, 디자인을 확인하거나 새로운 의견을 추가하는 기능은 앱에서와 동일하게 수행할 수 있어 편리하다.

Kactus 사용해보기

일단, 앱 아이콘이 무척 귀엽다. kactus라는 이름도 어디서 많이 본 단어라고 생각했었는데 cactus를 살짝 비틀어 만든 것이었다. (그러고보니 kakao도 cacao의 c를 k로..)

앱을 실행하면 웰컴 스크린이 나온다. 그런데 이것은!!! Abstract와 달리 Kactus는 Github을 표방한다기보다 그냥 Github이었다. (아래 Github Desktop 화면 참고)

그래도 혹시나 하는 마음에 Github 계정으로 로그인을 시도해 본다. Skip하더라도 결국엔 Git이다.

*Git은 소스 버전 관리 도구이며, Github는 Git을 좀 더 편리하게 사용할 수 있도록 인터페이스를 가미한 도구라고 대략적으로 이해하고 넘어가도 괜찮다.

오 마이 갓. 설마 했지만, 결국 정말 Github 인가보다. 로그인 이후 만나는 화면도 Github Desktop과 동일하다. Github을 사용해보지 않았다면 여기서부터 당황스러울지도 모르겠다. repository가 대체 뭐란 말인가!!

하지만 다행스럽게도 간단한 설명문구가 있다. 그냥 쉽게 프로젝트가 있는 폴더라고 이해해도 큰 불편함이 없을 것이다. 그 폴더가 PC에 있는지 Github에 있는지 정도의 차이. 새롭게 시작해도 되고, 이미 Github에 있는 것을 가져올 수 있고(clone), pc에 있는 것을 추가할 수도 있다.

새로 만들 경우, repository 이름과 프로젝트가 속할 폴더의 경로를 선택하면 기본적인 설정은 끝.

여기서부터 Kactus의 화면이라고 봐도 될 것 같다. 기존 Github Desktop에 없던 스케치 파일 생성 버튼이 보인다. Abstract에서 스케치 파일을 새로 만들 때와 마찬가지로 파일명 입력 후, 스케치 앱을 열어 디자인 작업을 시작할 수 있다. 아니면 repository로 지정했던 폴더에 스케치 파일을 추가해도 된다.

파일 추가를 완료하면 Changes 탭에 온갖 json 파일들의 리스트가 나타난다. 그 중에서 artboard.json 을 선택하면 작업한 디자인을 확인할 수 있다. 페이지 단위 혹은 아트보드 단위로 한 눈에 확인하지 못하는 점은 아쉽다.

같은 repository를 Github Desktop에서 확인할 경우, 그냥 json 데이터를 보게 된다.

작업 내용에 대해서 제목과 설명을 적고 commit 하면 수정 사항 반영 완료.

History 탭에서 작업 내역을 확인할 수 있다.

repository에 있는 스케치 파일을 수정한 경우, 이전 디자인과 새로운 디자인을 비교해서 보여준다. 작업 내용을 확인한 후에 commit 하면 된다.

commit을 완료하고 난 이후에는 상단에 있는 publish repository 메뉴를 통해 작업 내용을 Github에 올리면 된다. 이로써 디자인 버전 관리를 위한 준비가 끝났다.

Kactus는 결과적으로 Github에 repository를 생성하기 때문에 별도의 웹사이트가 없다. 안타깝지만 Github 웹에서 파일을 확인해봐도 디자인을 직접 확인하기는 어렵다.

3줄 요약

  • Abstract와 Kactus 모두 Github에 대한 경험치가 없다면 초반 학습에 시간이 조금 필요할 것 같다.
  • Kactus는 그냥 Github Desktop이었다. 뷰어와 코멘트, 스케치와의 연동, 웹에서의 이력 확인 등 Abstract에 한 표를 던진다.
  • Github Desktop도 예전보다 많이 예뻐졌지만, 주관적인 판단으로는 Abstract의 인터페이스가 훨씬 직관적이고 예쁘다(!)

hyuk

https://bit.ly/junhyukjang

)

Junhyuk Jang

Written by

https://bit.ly/junhyukjang

hyuk

hyuk

https://bit.ly/junhyukjang

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade