정리 안한 내 생각과 고민 in Figma

피그마에서 UI디자인을 하면서 내 생각 속에서 정리 안 한 머릿속 row file들을 생각 정리 없이 여기에 풀어내기로 했다. 머릿속에 생각들이 너무 많은데 그걸 혼자 가지고 있기보다 글로 풀어쓰는게 나을것같아서? 그냥 가감 없이 머릿속 생각들을 추가할 거기 때문에 머릿속의 생각이 바뀌거나 하면 계속 수정하거나 새 글로 올릴 예정! 

 

디자인하기 전에... 

디자인하기 전에 웬만하면 바뀌지 않는 것을 적어봄. 내 고집이나 단점이 있을 수 있음.

 

1. 8pt을 기준으로 삼는다. (피그마는 px단위기 때문에 px과 pt를 혼용해서 말할 수 있음 주의!)

이유는 여러 해상도에서 배수로 렌더될 때 웬만하면 깨지지 않아서이다. 그래서 내 피그마에서 Shift로 픽셀을 한 번에 옮기는 설정은 10px이 아닌 8px로 아예 바꿔버렸다. 웬만하면 8 단위로 하지만 정 안될 때는 4 단위로(4나 12 등...) 쓰기도 한다.

 

2. 디자인을 웬만해서는 중복해서 재활용 가능하도록 한다. 

통일성이 있는 디자인은 중복되는 경우가 생긴다. 그 부분을 html/css의 class 설정처럼 최대한 활용한다. 예전에 퍼블리싱을 했던 적이 있기 때문에 웬만하면 클래스로 묶어서 재활용하는 버릇이 있다. 예전에는 포토샵으로 하나하나 수정했지만 피그마에서는 그래도 컴포넌트라는 기능이 클래스 설정이랑 비슷해서 넘어갈 때도 적응이 쉬웠고 더 편해졌다. (지금은 아예 Framer도 배우는 중이다)

처음부터 바꾸지 않고 메인페이지와 서브페이지 하나를 여러가지로 디자인해 보고 최종 디자인이 정해지면 계속 쓰는 디자인을 그 뒤에 정리하는 편이다. 

 

3. 제일 먼저 브랜딩한 프로덕트의 특징부터 정리한다.

메인 페이지를 냅다 디자인하기보다는 프로덕트의 특징을 생각하고 전에 사용한 컬러감 통일을 위해 Primary secondary point컬러를 먼저 결정한다. 그리고 그 특징을 참조하여 디자인의 방향성을 먼저 결정하는 편이다. 컬러는 왜냐하면 BI 디자인을 아예 첨부터 다시 하지 않는 이상 컬러는 잘 바뀌지 않기 때문이다.

• 브랜드 컬러 > 디자인의 방향성(콘셉트) > high fidelity 와이어프레임 > 디자인 토큰 > 컴포넌트 설정 > 완성 > 프로토타입 순.
• 디자인 토큰이란 용어를 사용한 이유(이 글 참조).

예를 들면 에어서울 리디자인에서 기존 디자인의 디자인 컬러와 로고(브랜드) 컬러가 비슷하지만 달랐기 때문에 로고의 그린컬러를 primary 컬러로 정하고 secondary컬러를 기존디자인에서 활용한 핑크 컬러로 결정했다. 그리고 에어서울 홈페이지에서의 유저의 메인 미션은 항공권과 관련된 미션이기 때문에 항공권 티켓의 점선과 선디자인을 활용한 '티켓디자인'을 전체비주얼로 설정했다. 그러고 나서 항공사 홈페이지 특성상 유저가 다국적 유저라는 점을 감안하여 폰트는 여러 언어를 지원하는 폰트여야 했기 때문에(최소 영어와 한국어는 기본으로 지원해야 함) 그런 특성을 반영하여 결정했다. 

 

 

내가 디자인할 때 항상 하는 고민. 

맨날 하는 고민 그래도 해결되지 않지만 일단 적어봄. 

1. 아이콘 

• 아이콘 사이즈는 똑같은 디자인이라도 크기가 커지면(s, m, l..) 아이콘 엘리먼트들의 소수점이 생길 수 있다. <는 것을 염두에 둔다. 
• 일단 아이콘은 피그마로 직접 그릴 때도 있고 아예 일러스트레이터에서 그릴 때도 있는데 웬만한 아이콘은 그냥 피그마에서 그릴 수 있다. 그래서 굳이 일러스트레이터를 켜지 않고 피그마에 직접 그리는 편이다. 
• 아이콘 사이즈의 기준은 16px로 한다. 소수점 배수로 커지는 경우 16이 제일 수정하기 편리하다. (예전에 24 기준으로 디자인했다가 소수점 확대 때문에 다 바꾼 기억이 있음.) 
• 단축키 K로 아이콘 사이즈 확대할 때 아이콘을 다시 만져 줄 때도 있고 그대로 가기도 한다. 

단축키 K로 아이콘 사이즈 확대는 하지만... 고민이 됨. 아이콘을 다시 만져 줄 때도 있고 그대로 가기도 하는데 두 개의 장단점이 있는 것 같다. 다시 만져주면 소수점이 생겨 실제 사이트에서 깨져 보이는 것을 방지하지만 단점은 픽셀 차이로 같은 아이콘이지만 디자인이 달라짐. 그래서 웬만하면 16(1x)에서 디자인을 깨지지 않게 맞춰서 하고 K로 사이즈를 확대하는 편이긴 한데... 

 

2. 네이밍 규칙

이거는 진짜 퍼블리싱할 때도 했던 생각이다. 근데 이건 결론이 있음. 답이 없다...😇

회사 브랜드나 규모, 특징, 토큰 컴포넌트 등 엘리먼트들, 프로젝트를 같이하는 사람들(개발자, 기획자, 동료 디자이너) 등등 모든 상황과 위치에 따라 다르지만 그렇다고 그 마다 각각 정답이 있지도 않음. 왜냐면 네이밍은 더 근본적인 문제이기 때문에. ㅎㅎ

네이밍에 대해 웬만한 개발자, 디자이너 블로그들을 둘러봤지만 primitive, semantic 등 다양한 네이밍 규칙이 있지만 장단점이 있고 명확한 해답은 없음. 

그래도 그나마 내가 생각하는 최선의 방법은... 최대한 썼던 거 재사용하기? 😂 다양한 네이밍 규칙의 장단점을 알고 다양한 상황에 적용하는 것... 무엇보다도 기업의 규모나 페이지의 특성에 따라 다르기 때문에 유동적으로 생각해야한다. 그리고 개발자들과 많이 소통하는것도 추천한다. 왜냐하면 네이밍 규칙은 디자인단에서도 중요하지만 Framer같은 노코딩 웹디자인 툴을 사용할 때도 알수 있듯이 개발자들은 변수나 코드의 재사용성을 위해 네이밍을 고심하는 정도가 달라서 (개발단에서 훨씬 신경쓰면서 함) 무엇보다도 서로의 소통이 중요함.