본문 바로가기

반응형

UI

(3)
피그마로 SVG export했는데 리소스가 이상하다고? "컴포넌트의 상태별 SVG 소스를 뽑았는데 사이즈가 다 달라요." 어느 날, 개발자에게 이런 이야기를 들었다. 헐레벌떡 리소스를 확인해보았지만 컴포넌트는 모두 같은 사이즈였고, 그걸 상태 별로 variant 해둔 것 뿐이기 때문에 다르게 추출될 이유가 없었다. 대강 저 동그란 라디오 컴포넌트를 export한 상황이었는데 직접 해보니 정말 사이즈가 다르게 뽑혔다. 여러 테스트를 해보다 보니 두 가지 난감한 상황을 마주할 수 있었다. - SVG의 사이즈가 1px씩 틀어지는 현상 (개발자가 문의한 것) - 보더가 틀어지는 현상 SVG 사이즈가 틀어지는 케이스 내 경우에는 SVG의 height가 1px씩 틀어지는 현상이었다. 16x16 컴포넌트라면 16x17로 뽑히는 거다. 사건 현장(?)을 좀 더 명확히 보자..
디자인 버전관리 툴 7종 비교하기 (Github, Sketch Cloud, Abstract..) -1 버전 관리? 버전 관리! 포토샵으로 작업하던 시절에는 현재 열려있는 파일의 히스토리를 관리하는 기능이 전부일 뿐, 그 이상은 없었다. 그러다 보니 버전 별로 남기고 싶으면 작업1.psd, 작업2.psd, 작업3.psd, 작업4,psd...으로 저장해두는 수밖에 없었다. (얼마나 고된 세월이었던가) 작업물을 버전 별로 따로 저장해두고, 수정 사항이 생기면 또 저장하고, 저장, 저장, 또 저장. 그러던 중 디자이너들이 개발 친화적으로 변하면서 Github이라는 개발 버전 관리 툴에 관심을 갖게 되었다. 나 같은 경우에는 작업 파일을 여러 버전으로 들고 있기 싫었고, 작업 과정을 기록하고 싶어서 Github에 관심을 가졌다. 버전 관리를 하면 좋은 점이 무엇일까. 버전 관리를 하면 변경된 사항을 쉽게 저장하고..
디자인과 개발 아웃풋의 컬러가 다르다면 ? 내 컴퓨터에서는 색을 잘 맞췄는데 실제 아웃풋에서는 생각보다 쨍하거나, 칙칙하게 나오는 일이 많다. 디자인과 실제 아웃풋 컬러가 다르게 보이는 일이 발생하는 것이다. 이런 일을 타파하기 위해서 컬러 프로파일의 개념을 알아둬야한다. 디지털 디자인과 컬러 프로파일의 관계 컬러 프로파일은 크게 3가지로 나누어진다 sRGB, Adobe RGB(ARGB), P3 sRGB : 모니터 및 프린터 표준 RGB 색공간 ARGB : sRGB에서 손실되고 부족한 영역대를 보완한 색공간, 어도비의 인쇄장비 기준 P3 : sRGB보다 약 25% 더 많은 컬러를 제공, 디지털 시네마 기준 대표적인 제품은 Iphone 7, 아이패드 프로, 아이맥 등 ARGB는 인쇄 기준 색공간이므로 크게 신경쓰지 않아도 된다. 실제로 요즘 많은 ..

반응형