brunch

라이킷 86 댓글 18

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김달 Feb 03. 2018

HTML to Sketch에 기대하는 변화에 대해.

HTML to Sketch

지난 몇달간 짬짬히 참여해오던 오픈소스인 html-sketchapp을 기반으로

웹사이트를 쉽게 스케치 레이어로 변환하는 앱을 만들게 되었습니다.

상단의 주소창에 웹사이트의 주소를 적고 엔터를 입력해 해당 사이트로 이동할 수 있고,

우측 사이드 바의 버튼을 통해 페이지 전체나, 일부분을 스케치 레이어로 변환할 수 있는 앱입니다.

여러 사이트들을 스케치 레이어로 변환해보는 재미가있습니다.ㅎ..

다운받아서 한번 써보셔요ㅎㅎ

App 다운로드 : https://kimdal-hyeong.github.io/html-to-sketch-electron/download-analyst/

Github : https://github.com/KimDal-hyeong/html-to-sketch-electron

앱에 띄워진 웹사이트의 페이지 전체를 Draw Page 버튼을 눌러, 활성화 되어있는 스케치 창에 그려넣을수 있습니다.

Pick 버튼을 눌러, 스케치 레이어로 그리고 싶은 일부분의 영역을 선택할 수 있습니다.

이걸 어디에 쓰죠?

처음 이런 기능이 필요하다고 생각했던것은, 서비스를 개발하는 과정에서 불가피하게 시안과 다르게 수정되는 부분들이 발생하는데 그것들을 쉽게 디자인 시안에 동기화시킬수 없는가에 대한 고민이었습니다.

최근의 UI디자인의 많은 변화들을 살펴보면, 디자인 시안이 실제품과 더 가까워지기위한 노력들이 이어지고 있습니다. 프로토타이핑이나 디자인 시스템이 대표적인 사례라고 생각합니다.

더 나아가, 디자이너가 직접 마크업 언어를 작성해 비주얼을 만들어나가는 경우도 더욱 늘어나고 있습니다.

디자인 시스템, 가이드를 작업하는데에도 '디자인툴'을 이용하는것보다, 더 체계화된 마크업 언어들을 사용하는것이 훨씬 명확합니다. 제품과 같은 환경에서 작성되기 때문에 기술적인 차이로 발생하는 비주얼 차이도 직접 확인하며 수정할 수 있고, (폰트 렌더링, 타이포그래피 옵션, 컬러 환경, 그림자와 같은 효과 등) 반응형 레이아웃이나, 마우스 이벤트와 같은 인터렉션도 포함할 수 있죠,

심지어 이 결과물은 실제 개발에도 바로 적용될 수 있습니다.

하지만 우리는 코드로만 디자인을 하는것은 익숙하지도, 실제로 편하지도 않습니다.

직관적으로 여러 요소들을 마우스로 드래그해 만들어 나가는, 디자인툴을 통한 시안작업은 필수적입니다.

결국 코드를 통해 수정했거나, 작성된 비주얼 결과물에 대해서는, 디자인 툴에서 새로운 시안작업을 위해 새로 그려내야합니다.

당장 서비스로 이미 나의 작업물이 배포되어 있고, 눈으로 보이는데, 디자인 툴을 통해 쉽게 수정할 수가 없고.

디자인 툴보다 훨씬 체계화된 비주얼 표현 수단인 마크업 코드가 있는데, 이걸 다시 스케치로 작업하는 과정은 너무 비생산적 이라는 기분이 느껴졌습니다.

"디자이너가 만드는 것이 '디자인 시안'이 아닌 '제품'이라면, 오히려 최종 결과물이 되어야하는것은 디자이너의 디자인 파일이 아닌 html과 같은 마크업 코드가 아닐까?"

"html을 sketch로 변환해 다시 다른 시안으로 작업할 수만 있다면 충분히 '코드'를 디자인 결과물로 생각할수 있지 않을까?"

그런 생각들로부터 여러가지 플러그인, 오픈소스를 찾아보곤했고, 작년 말즈음 html-sketchapp이라는 프로젝트를 찾을 수 있었습니다. 몇가지 부족한 기능들은 직접 기여하며 추가해나갔고, 이후 이 모듈을 더 간편하게 사용할 수 있도록 앱으로 제작하게 되었습니다.

아직은 완벽한 변환과, 자유로운 활용이 되지는 않지만, 이 정도면 제법 유용하게 이용될 수 있는 수준이라고 판단되어 공유를 드려보게 되었습니다.

업무의 변화

저는 이 기능이 완전히 고도화된다면, 개발과 디자인의 협업관계를 바꿀 수 있다고 생각합니다.

디자이너의 결과물이 제품의 '코드'가 된다면 우리는 스케치파일의 관리에 연연하지 않아도 됩니다.

다양한 시안 배리에이션과 최종 합의안을 만들어 나가는 과정을 아카이빙 하는 목적에서의 파일관리는 필요할 수 있으나, 필수적이지 않습니다. 합의안에 대한 스케치파일은 최신 제품의 '코드'가 대신할테니깐요.

서비스의 과거 비주얼은 소스 코드의 버전관리 시스템에서 가져올 수 있기때문에, 합의안의 기록도 자동화 될수 있습니다.

그리고 디자이너는 시안 작업을 너무 완벽히 할 필요가 없어집니다.

디자이너가 마크업 코드를 직접 작성한다면, 시안의 1px 단위의 디테일은 코드를 작성하면서 결정, 수정해 나가는것이 훨씬 더 빠르고 효율적으로 작업할수 있습니다. 기존에는 장기적인 유지보수 때문에 처음부터 스케치 파일에서 많은 디테일까지 하나하나 잡아줘야 했다면, 이제는 적당히 비례와 구성만 정리하고, 코드에서 디테일을 잡아주기만 하면 스케치 파일로도 만들어 낼 수 있습니다.

일을 두번, 세번하던 과거와 달리 연속성있게 작업을 진행할 수 있게됩니다.

개발자와 디자이너는 함께 '코드'라는 하나의 결과물을 만들어 나갈수 있게됩니다.

스케치를 통한 시안 수정이 필요하다면, 현재의 서비스 '코드'로 부터 스케치 레이어를 추출해 작업하면 됩니다.

이후 해당 수정사항이 완전히 제품에 적용되었다면 시안 작업을 위해 만들어진 스케치 파일은 남겨둘 필요가 없습니다. 언제든지 다시 '코드'에서 꺼내서 쓸 수 있을테니까요.

물론 아직 HTML의 전부를 스케치 레이어로 변환시키지는 못하고 있습니다만, 그런 빈틈들은 앞으로 계속해서 채워져 나갈것이고 언젠가는 거의 완전한 변환이 가능해질겁니다.

그리고 조금 더 스케치 작업에 친화적인 기능들로. 자동 그룹핑, 심볼화, 오토 사이징 등이 추가적으로 구현되면 더욱 편리해질 수 있습니다.

이런 방향으로 디자인 업무를 개선하려는 생각도 있다는 것을 공유드리며,

열심히 만든 HTML to Sketch 앱을 많은 사람들이 이용해보시기를 바랍니다.ㅠㅠ

변환 앱이나, 생각과 글에 대한 피드백은 언제든지 환영합니다!!

읽어주셔서 정말 감사드립니다.