본문 바로가기

Design

(18)
[스케치] 텍스트에 컬러스타일 먹이기 (not 오버라이드) 스케치에서 텍스트 컬러를 변경하려면 여러 방법이 있다. 나는 아래 4가지의 방법을 테스트해보았고 각 장단점을 얘기해볼 거다. 결론을 빠르게 보고 싶다면 4번 방법으로 스크롤해서 보자! 1. 컬러 피커로 컬러 지정 2. 텍스트를 심볼로 만들어 override로 컬러스타일 적용 3. 텍스트에 마스크 씌워 override로 컬러스타일 적용 4. 텍스트를 그룹으로 묶어 컬러 스타일 적용 1. 컬러 피커로 컬러 지정 1번이 기본적으로 사용하는 방법일 것이다. 하지만 나는 매번 컬러 팔레트를 불러와서 피커로 찍어야하는게 너무 귀찮았다. 일단 킵해두고 다음 테스트로 진행. 2. 텍스트 심볼 오버라이드 이 방법은 Apple의 UI kit에서 착안되었다. Apple의 몇몇 UI들은 들여다보면 오버라이드에서 텍스트 컬러를..
디자인 버전 관리 툴, Abstract로 협업하며 느낀 점 앱스트랙트(Abstract)로 협업하기 앱스트랙트를 사용한 지는 수년 되었지만 다른 디자이너들과 협업할 일이 없었다. 최근에야 본격적으로 여러 디자이너들과 사용하게 되면서 겪었던 시행착오를 남겨보려 한다. 원래라면 보통 작업을 피쳐 별로 진행하겠지만 요새 디자인시스템을 잡고 있다 보니 손대야 할 것들이 많아서 더 시행착오를 겪은 것 같다. 브랜치 따고 의식의 흐름으로 작업하기? 주로 많이 했던 실수는 브랜치를 계획적으로 관리하지 않았던 것이다. 특정 개선 목적으로 브랜치를 따놓고 다른 부가적인 작업도 의식의 흐름으로 진행했다. (물론 팀에는 공유하고) '작은 수정이니까 하는 김에' 라는 마음으로 진행했지만 팀원들이 브랜치를 따면서 문제가 생기기 시작했다. 대충 브랜치 따면 이렇게 돼요 야금야금 수정을 하..
제플린 3.0의 스타일가이드 알아보기 Zeplin 3.0 & Styleguide 제플린에서 스타일가이드 기능을 내놓은 지 꽤 되었지만 사실 그동안 관심이 없었다. 내가 그러거나 말거나 제플린은 2020년 2월 달에 제플린 3.0을 선보이면서 스타일가이드를 Storybook, Github 등과 엮어 디자인시스템을 더 견고하게 만들 수 있게 되었다. 회사에서 디자인시스템에 대한 일을 하면서 실사용 목적으로 업데이트된 내용들을 테스트하니 꽤 쓸만할 것 같아 리뷰해본다. 제플린 3.0 확인하기 스타일가이드 생성 일단 스타일가이드 편집과 생성은 어드민 계정에서만 가능하다. 어드민 계정으로 접속하여 우측 상단의 1번 스타일가이드 탭을 선택한다. 2번으로 표시된 Create Styleguide라는 버튼을 누르면 3번의 스타일가이드 타입을 선택하는 팝업창..
안드로이드 적응형 앱아이콘 만들기 (Adaptive icon) Adaptive icon 예전 안드로이드에서는 iOS와는 다르게 다양한 앱 아이콘 형태를 사용했었다. 하지만 각 핸드폰 제조사들이 각자 통일된 앱 아이콘 모양새를 쓰기 시작하면서 아이콘이 잘려 보이는 등 제작자가 의도하지 않은 모양새가 나오기 시작했다. 구글은 이것을 해결하기 위해 Android 8.0(Oreo)부터 적응형 아이콘(Adaptive icon)을 도입했다. 디바이스들마다 사용되는 모양새는 위와 같이 크게 5가지로 구분할 수 있다. 각 모양대로 시스템에서 마스크를 씌우기 때문에 제작하는 입장에서는 가이드에 맞춘 이미지만 1종으로 제작하면 된다. Guideline 개발자에게 전달할 리소스는 아래와 같다. - Background image (108dp*108dp) : 불투명 이미지 - Foregr..
디자인 버전관리 툴 7종 비교하기 (Github, Sketch Cloud, Abstract..) -2 1편(https://carrotdesign.tistory.com/53)에 이어 2편을 작성한다. 오늘 살펴볼 서비스는 Plant, Folio, Sympli이다. Plant (https://plantapp.io/) 장점 플러그인이라 편의성이 좋고 디테일한 뎁스는 웹으로 접속해서 보는 형태이다. 웹앱에서 화면을 확인할 수 있다. 업로드하는 파일의 용량 제한이 없다. (스케치 파일이 그리 무겁지 않긴 하지만.) 선택한 대지만 내보내는 기능이나 스케치 라이브러리를 지원하는 등 편의성을 제공한다. 단점 브랜치를 따서 작업하지 않고 마스터라인만 있는 것처럼 동작한다. 마스터라인과 충돌이 생기면 Preview로 보며 최신 것을 선택해야 해서 작업량이 많으면 헷갈릴 듯. 작업물이 업로드되면 다른 사람에게 메일로 알림이..
디자인 버전관리 툴 7종 비교하기 (Github, Sketch Cloud, Abstract..) -1 버전 관리? 버전 관리! 포토샵으로 작업하던 시절에는 현재 열려있는 파일의 히스토리를 관리하는 기능이 전부일 뿐, 그 이상은 없었다. 그러다 보니 버전 별로 남기고 싶으면 작업1.psd, 작업2.psd, 작업3.psd, 작업4,psd...으로 저장해두는 수밖에 없었다. (얼마나 고된 세월이었던가) 작업물을 버전 별로 따로 저장해두고, 수정 사항이 생기면 또 저장하고, 저장, 저장, 또 저장. 그러던 중 디자이너들이 개발 친화적으로 변하면서 Github이라는 개발 버전 관리 툴에 관심을 갖게 되었다. 나 같은 경우에는 작업 파일을 여러 버전으로 들고 있기 싫었고, 작업 과정을 기록하고 싶어서 Github에 관심을 가졌다. 버전 관리를 하면 좋은 점이 무엇일까. 버전 관리를 하면 변경된 사항을 쉽게 저장하고..
2020 Sketch Inspector 베타 버전 | 테스트 후기 2020년 1월, 스케치가 Inspector 기능을 업데이트했다. 다른 UI 디자인 툴도 제공하고 있지만, 많은 디자이너들이 사용하는 스케치에서 내놓은 만큼 파장이 더 클 것 같다. 과연 제플린을 대체할 수 있을지 사용해보기로 했다. 업데이트 내용 웹에서 Inspector 지원 Copy버튼으로 수치 복사 가능 컬러값을 각 개발 언어에 맞춰서 복사 가능 앞으로 업데이트할 내용 심볼, 오버라이드, 텍스트 스타일을 명확하게 볼 수 있도록 디자인 시스템에 대한 지원 레이어부터 전체 디자인까지 에셋 추출 기능 코드와 컬러 포맷 형식 개선 (CSS와 다른 언어 포함) 언어 저장 (컬러 포맷같은 곳에서 개발 언어를 한 번만 선택해두면 전체 설정됨) Sketch blog에서 업데이트 내용 확인하기 사용 후기 제플린과 ..
상표 표시로 브랜드 보호받기 (TM ™, SM ℠, R ®) 현 회사에서 아마존에 물건을 등록하면서 Amazon Brand Registry 과정을 진행했다. (내가 진행한 건 아니고 어깨 너머로 봤다.ㅋㅋㅋ) 아마존에 브랜드 등록을 하면 복제품에 대해서 보호받을 수 있고 아마존에서 제품이 좀 더 적극적으로 노출될 수 있도록 해주는 것 같다. 옆에서 주워들은 내용을 조금 정리해보고자 한다. 모든 내용들은 미국을 기준으로 한다. 상표 표시 우리는 일상생활에서도 상표 표시를 매일 접한다. 우리가 자주 가는 스타벅스만 해도 로고나 각종 굿즈 옆에 ®, ™ 표시가 있다. 심지어 일회용 컵 홀더에도! 지금 옆에 스타벅스 컵이 있다면 한번 확인해보자. 위 이미지처럼 오른쪽 하단/상단에 붙이는 게 가이드라인이고, 읽히지 않더라도 존재가 인지될 정도로만 넣으면 된다. 이런 ®과 ..
iPhone X, iPhone 11의 안전영역(Safe area)을 알아보자. iPhone X 2017년에 나온 아이폰 X. 출시 당시 탈모 디자인으로 수많은 논란이 있었지만 많은 사람들을 강제로 적응시켰다. 많은 핸드폰 제조사들도 노치 디자인을 따라가며 스크린 사이즈를 넓히기 시작했고 애플은 2020년까지도 아이폰 11, XS, XR로 노치 디자인을 이어가고 있다. 이번에 X 계열 디자인을 제대로 대응하게 되면서 정리 글을 작성하게 되었다. (그동안은 개발자가 알아서..) 정리하면서 Portrait 모드 같은 경우 가이드를 쉽게 찾을 수 있지만 Landscape 모드는 찾기가 쉽지 않아서 한 번 정리해보고자 한다. 일단 Safe area를 알아보기 전에 노치 디자인에서 주의해야할 Common Elements에 대해서 짚어보고 가자. Common Elements 아이폰 X의 Por..
Sketch Library (Sketch, Invision DSM) Design Library 디자인 라이브러리는 스케치를 사용하는 팀원들 간에 심볼과 스타일 공유하고 동기화할 수 있어 많이들 사용한다. 이 것을 사용하면 디자인의 통일성과 비용절감을 할 수 있겠쥬. 이번에 라이브러리를 사용함에 있어서 리서치한 내용을 기록차 남겨보도록 한다. 먼저 Symbol Library를 적용함에 있어서 2가지 툴을 조사했다. 하나는 보편적으로 사용되고 있는 Sketch에서 제공하는 Symbol Libary와 Invision에서 제공하는 DSM. 먼저 DSM부터 알아보자 Invision DSM Invision DSM은 인비전에서 Brand.ai라는 회사를 인수하고 재정비하여 오픈했다. 간략한 기능은 아래와 같다. 스케치, 일러스트레이터 공유 CSS, Sass, Json, Android..
디자인과 개발 아웃풋의 컬러가 다르다면 ? 내 컴퓨터에서는 색을 잘 맞췄는데 실제 아웃풋에서는 생각보다 쨍하거나, 칙칙하게 나오는 일이 많다. 디자인과 실제 아웃풋 컬러가 다르게 보이는 일이 발생하는 것이다. 이런 일을 타파하기 위해서 컬러 프로파일의 개념을 알아둬야한다. 디지털 디자인과 컬러 프로파일의 관계 컬러 프로파일은 크게 3가지로 나누어진다 sRGB, Adobe RGB(ARGB), P3 sRGB : 모니터 및 프린터 표준 RGB 색공간 ARGB : sRGB에서 손실되고 부족한 영역대를 보완한 색공간, 어도비의 인쇄장비 기준 P3 : sRGB보다 약 25% 더 많은 컬러를 제공, 디지털 시네마 기준 대표적인 제품은 Iphone 7, 아이패드 프로, 아이맥 등 ARGB는 인쇄 기준 색공간이므로 크게 신경쓰지 않아도 된다. 실제로 요즘 많은 ..
git-sketch-plugin 사용후기 git-sketch-plugin 이번에 깃헙과 스케치를 연동하는 플러그인이 나왔다는 소식을 접해서 잠들어있던 깃헙을 깨우는 겸 사용해보았다.개인적으로 원했던 기능이 커밋된 지점에서 그 파일을 다시 불러오는 기능이었는데 깃헙 데스크탑엔 그 기능이 없어서 소스트리로 변경!아무래도 인터페이스나 사용 방법이 익숙치 않아 개발자의 힘을 빌어서야 세팅할 수 있었다. 작업을 한 뒤, 깃헙에 올리면 위 그림과 같이 이전, 이후로 작업된 화면을 비교해준다.깃헙을 이제 막 사용해보려는 유저로서 텍스트로만 이루어진 화면에 기 죽으며 끄는 경우가 종종 있었는데,그 허들을 조금 낮춰주는 플러그인이다. 비교 이미지가 생겨서 커밋 지점을 찾기가 훨씬 수월해졌다. 사용해보면서 느낀 불편한 점은 두 가지.1) 내 로컬 파일에서 미리보..