우리 회사는 다국어앱과 웹사이트를 지원하는 회사다. 다국어를 사용하는 회사긴 하지만 서로 결국은 영어로 소통을 하지만… 한가지 언어로도 소통이 안되는데 다국어라니;; 처음에는 한국어 혹은 영어 하나로만 구성했던 UI가점차 중국어, 일본어, 독일어, 프랑스어, 아랍어처럼 다양한 언어로 확장되기 시작하면서디자이너는 텍스트 길이, 폰트 차이, 레이아웃 깨짐 등의 문제를 한꺼번에 감당해야 합니다. 이럴 때마다 매번 화면을 복사해서 각 언어 버전을 … Read more
디자인 파일을 넘기면, 개발자에게서 이런 말 한 번쯤 들어보셨을 겁니다.“이거 여백 기준이 뭐죠?”“폰트 사이즈가 Figma랑 다르게 느껴져요.”“이거 실제로 구현 가능한 거 맞나요?” 그럼 디자이너들은 생각하죠. “진짜 센스 없다…” 딱 보면 모르나? 답답한 개발자들아… 한 번에 이해되면 좋겠지만, 실제 협업에서는 소소한 오해가 쌓여개발자와 디자이너 사이에 눈치 싸움이 벌어지기도 하죠.이런 문제를 줄이기 위해 등장한 게 바로 Figma … Read more
디자인 시스템을 만든다는 건 단순히 예쁜 UI 컴포넌트를 정리하는 게 아닙니다.브랜드가 지켜야 할 일관성과 논리를 ‘코드처럼’ 관리하고 유지한다는것에 가깝죠. 그래서 디자인 시스템을 처음 설계할 때 가장 먼저 고민해야 할 것은색상, 타이포그래피, 여백, 라운드, 쉐도우 같은 기초적인 속성값들인데요. 이런 속성값을 체계적으로 관리하는 방법이 바로 디자인 토큰 Design Token 입니다.그리고 다행히도, Figma 안에서 이 디자인 토큰 개념을 … Read more
디자인을 하다 보면 텍스트나 이미지처럼 반복되는 데이터를 프레임에 하나하나 붙여 넣는 일이 꽤 귀찮을 때가 있어요. 예를 들어 제품 목록, 사용자 카드, 뉴스 피드처럼 반복되는 UI를 작업할 때 매번 복사해서 붙이고, 또 수정하고…이런 반복 작업은 시간도 많이 들고, 오류가 생기기 쉽습니다.그럴 때 Figma에서 JSON 데이터를 자동으로 UI에 연결하는 방법을 알게 되면, 업무 효율이 눈에 띄게 … Read more
Figma를 사용하다 보면 Auto Layout은 잘알면 편하지만 사용법이 조금은 애매하죠? 처음에는 버튼이나 카드처럼 단순한 컴포넌트를 정렬할 때 유용하게 느껴지지만,조금만 구조가 복잡해지면 정렬이 무너지고 간격이 뒤죽박죽되는 경우를 자주 겪게 돼요.특히 모바일이나 반응형 UI를 설계할 때는 작은 오차가 전체 레이아웃에 영향을 주기 때문에Auto Layout을 정확하게 이해하면서 사용해야 합니다. 이번 글에서는 Auto Layout이 꼬이지 않도록 설정하는 핵심 원리와 … Read more