<주간 UIUX 디자인 : ui sketch>

ui 디자이너라면 반드시 알아야할 스케치(Sketch) 활용법

제로베이스 UIUX 디자인 스쿨

ui 디자이너라면 놓치면 안될 스케치 (Sketch)를 활용한 ui 디자인 실무 노하우에 대해서 알려드립니다. 스케치(sketch)를 활용해 ui 디자인을 효율적으로 작업해보세요!

1. UI 디자이너들이 스케치(Sketch)를 사용하는 이유는 뭘까요?

먼저 UX 프로세스의 변화를 가장 큰 이유로 꼽을 수 있어요. 점점 많은 조직에서 애자일(Agile) 방식을 채택하게 되면서 ui 디자인 프로세스에도 변화가 생긴 것인데요.
애자일 방식은 [요구사항 분석 (PLAN) -> 디자인 (DESIGN) -> 구현 (DEVELOP) -> 테스트 (TEST)] 이 4가지 단계를 작은 기능 단위로 빠르게 순환, 반복 해야합니다. 그에 따라 ui 디자인 프로세스 역시 민첩하게 진행 되어야 했죠.

그 결과 스케치(Sketch)가 탄생했습니다.

보헤미안 코딩이라는 네덜란드의 회사에서 만든 “디자이너를 위한 빠르고, 가벼운 ui 디자인 툴입니다. 그렇다면 스케치(sketch)가 왜 빠른 ui 디자인 프로세스에 알맞은 툴인지 알아볼까요?

1) 가벼운 ui 디자인 툴

ui 디자이너들이 오랫동안 사용해온 포토샵(photoshop)을 떠나 스케치(sketch)를 선택한 이유는 바로 ‘가볍다’는 것입니다. 먼저 프로그램 자체 크기도 포토샵은 약 1기가 바이트인데 비해 스케치는 50MB 정도로 프로그램을 구동하는 데에 부담이 없습니다. 또 같은 ui 화면을 디자인 했을 때도, psd파일이 스케치 파일보다 최소 몇 배씩 큰 용량을 차지하게 되니, 빠르고 가벼운 작업이 중요한 애자일 프로세스에서 스케치(sketch)가 승리할 수 밖에 없었죠.

2) 벡터 기반의 ui 디자인

스케치(sketch)의 가장 큰 특징은 벡터 방식의 ui 디자인 툴이라는 것인데요. 덕분에 ui 디자인 작업을 할 때 해상도와 크기에 대한 제약이 없습니다. ui 디자인 에셋이 아무리 많이 늘어나고 화면이 아무리 커지더라도 비트맵 방식에 비해 큰 부하를 주지 않죠. 이는 다양한 디바이스 및 해상도에서 일관되고 고품질의 디자인을 만들 수 있도록 도와줍니다. 또 ui 디자인 프로세스의 모든 단계에서 작업을 매끄럽게 반복할 수 있습니다.

2. 스케치(Sketch)에는 어떤 특별한 기능이 있을까요?

1) 심볼 (Symbol)

ui 디자이너들이 일관된 ui 디자인을 유지할 수 있도록 하는 핵심 기능입니다. 대개 반복적으로 사용되는 ui 디자인 요소들이 있는데요. 예를 들어, 로고, 버튼, 아이콘, 텍스트 등입니다. 이 ui 요소들을 심볼로 만들면, 편리하게 여러 곳에서 사용할 수 있으며, 한 곳에서 수정하면 다른 모든 곳에서도 자동으로 업데이트됩니다.

이를테면, 버튼의 ui 디자인이 수정되었다면, 심볼을 사용하여 모든 버튼 디자인을 한 번에 업데이트할 수 있습니다. 이렇게 심볼을 사용해 일관된 ui 디자인을 유지할 수 있으며, 수정 작업을 간소화할 수 있습니다. 즉, 스케치에서 심볼은 ui 디자인 요소들의 재사용성을 높이는 데에 매우 유용한 기능 중 하나입니다.

2) 플러그인 (Plug-in)

스케치(Sketch)는 ui 디자이너를 위한 700개 이상의 플러그인을 갖고 있습니다. 플러그인이란 소프트웨어의 부가 기능으로, 앱이나 브라우저에서 설치하여 사용자 경험을 향상시키는 소프트웨어 구성 요소인데요. ui 디자인 작업을 더 효율적으로 만들어주는 플러그인 몇 가지를 추천해드릴게요!

1. 스케치 클리너 (Sketch Cleaner)

스케치(Sketch) 작업 영역의 레이어를 손 쉽게 관리하는 플러그인입니다. ui 디자이너가 ui 디자인 작업을 할 때 레이어를 체계적으로 유지하고 관리하는 것은 매우 중요한 부분 중 하나인데요. 수 많은 레이어를 일일이 관리하는 것이 번거로운 ui 디자이너를 위해 추천합니다. 이 플러그인을 사용하면 비활성화된 레이어 스타일를 제거하고, 숨겨진 레이어도 선택하여 삭제하며, 모든 레이어에서 테두리 위치를 일관되게 유지할 수 있습니다.

2. Looper

Looper는 레이어 및 그룹의 복제를 자동화해서 고유한 패턴 디자인을 즉시 생성해내는 플러그인입니다. 복잡한 기하학적 디자인과 일러스트레이션을 수동으로 만드는 작업은 바쁜 ui 디자이너에게 꽤 많은 시간을 필요로 하는데요. Looper를 활용하여 빠르고 쉽게 원하는 패턴을 만들 수 있죠. 또 회전, 크기 조정 및 불투명도와 같은 요소를 사용해 고유한 패턴을 제작하여, 인상적인 ui 디자인을 완성할 수 있습니다.

3. 스케치(Sketch) ui 실무에선 어떻게 쓰이고 있을까요?

1) 앱 아이콘 디자인

ui 디자인에서 아이콘은 뗄래야 뗄 수 없는 관계인데요. 특히 실무에서도 스케치(Sketch)를 활용하여 앱 아이콘 ui를 디자인을 하는데 많이 사용하고 있습니다.

스케치(Sketch)에서는 IOS와 Android의 앱 아이콘 템플릿을 제공하고 있기 때문인데요. 이 템플릿을 활용하면, 앱 아이콘 디자인 시 필요한 크기와 위치 등을 더 쉽게 파악할 수 있어요. 또 레이어 스타일을 적용해 ui 디자인의 일관성과 앱 아이콘의 그림자, 외곽선, 색상 등을 지정하여 디자인 일관성을 유지할 수 있어 매우 편리하게 사용되고 있습니다.

2) 디자인 시스템

디자인 시스템은 ui 디자이너와 협업하는 모든 부서와의 합의입니다. 의사 소통, 효율성 및 의사 결정을 개선하는데 도움이 되는 공통 언어라고 할 수 있죠. 디자인 시스템을 만들면, 팀 전체에서 일관된 디자인을 유지할 수 있고, ui 디자이너는 디자인 작업을 효율적으로 수행할 수 있습니다. 스케치(Sketch)는 디자인 시스템을 만들기에 매우 유용한 툴입니다. 디자인 시스템을 만들기 위한 노하우를 알려드릴게요.

1. 컴포넌트 만들기

스케치(Sketch)에서는 컴포넌트(Component)를 만들 수 있습니다. 컴포넌트는 반복적으로 사용되는 디자인 요소를 그룹화하여 편리하게 재사용할 수 있습니다. 예를 들어, 버튼, 텍스트 입력 필드, 메뉴 등을 컴포넌트로 만들어서 사용하면 일관된 디자인을 유지할 수 있습니다.

2. 스타일 가이드 생성하기

디자인 시스템의 중요한 요소 중 하나입니다. 스타일 가이드를 만들면, 팀 전체에서 일관된 색상, 글꼴, 아이콘 등을 사용할 수 있습니다. Sketch에서는 플러그인을 활용하여 자동으로 스타일 가이드를 생성할 수 있습니다.

이렇게 만들어진 디자인 시스템은 폰트, 로고, 레이아웃, 디자인 활용법에 대한 가이드 역할을 하게 됩니다.

4.스케치(Sketch) 사용하기로 맘 먹었다면? 꼭 확인해보세요!

< 다운로드 방법 >

스케치(sketch)를 다운로드 하기 위해서 스케치 사이트에 방문해줍니다. 사이트에 가입 후에 구입하면 됩니다. 가격은 사용하는 사람 수와 사용 기간에 따라 다르게 책정되어 필요한 만큼 합리적인 가격으로 사용할 수 있습니다.

물론 트라이얼 버전을 다운로드 하면 비용 없이 사용 가능하구요. 트라이얼 버전을 설치한 후 나중에 언제든지 라이선스 키를 등록해서 재설치 없이 이어서 사용도 가능합니다.

스케치 홈페이지 링크 : https://www.sketch.com/

아참! 다운로드 전 놓치지 마세요! 😲

스케치(sketch)는 맥 OS 기반 앱으로 출시되어 맥 OS에서만 사용할 수 있다는 호환성 문제가 있었는데요. 현재 협업툴로 한 단계 발전한 스케치(sketch)는 모든 운영 체제의 모든 웹 브라우저에서 작동할 수 있도록 업그레이드 됐다고 해요!

하지만 스케치(sketch)는 맥 OS에 최적화된 프로그램이니 최적의 ui 디자인 작업을 하고 싶은 ui 디자이너라면 iMac이나 Macbook으로 작업하는 것을 추천하며 글을 마무리 할게요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠