본문 바로가기
정보

가이드로 쓰세요. UI 컴포넌트 오픈북

by 필로버스 2024. 5. 21.

공부에 도움이 되는 책은 사려고 하는 편이다. 강박이 생긴 거 같다 아니 걱정인 거 같다. 적어도 내 일에 관련되어서 뒤쳐지고 싶지 않다는 그런 걱정. 점점 나이와 경력이 쌓이면서 걱정거리도 늘어갔다. 누군가를 가르쳐 주고 알려줘야 하는 위치에 서면서 더 공부를 많이 하게 됐다. 그래도 평소에 공부와 정보 습득을 열심히 했던 터라 창피하고 민망한 순간은 오지 않았다. 그리고 내가 모르거나 기억이 안 나면 서로 알아보고 알려 주자고 하거나 나도 모르니까 알아보고 알려 주겠다고 한다. 그건 아주 좋은 방법이라고 생각한다. 대부분의 사람들은 모르는 걸 아는 척하는 거 보단 공부하고 공유해 보자고 하면 긍정적인 태도를 취한다. 그렇게 얻은 지식과 정보는 쉽게 잊히지도 않고. 모르는 걸 모른다고 말하는 것도 용기다.

아주 오래전 이야기다. 지금 같이 일하는 팀원들조차 들어본 적도 없다고 했다.

디자인 툴에 관한 이야기다. 나는 웹디자인을 할 때 포토샵보다 파이어웍스를 더 많이 썼다. 오랫동안 웹디자인을 했다는 사람들도 파이어웍스를 모르는 사람이 많다. 아마 플래시는 다 들어봤을텐데 플래시 회사였던 매크로미디어의 프로그램이었다. 매크로미디어를 어도비가 인수했고. 포토샵을 쓰다 파이어웍스를 썼을 때는 정말 신세계라고 생각했다. 지금의 어도비 XD 전신?이라고 생각될 만큼 그 당시에는 획기적이었다. 그 후로 스케치와 XD를 사용했고 지금은 주력툴로 피그마를 쓰고 있다. 스케치를 처음 접했을 당시 커뮤니티나 공부할 방법이 없어 영어를 해석해 가면서 배웠던 기억이 있다. 그래서인지 피그마로 넘어올 때 뭔가 아쉽다는 생각을 많이 하기도 했다. 하지만 당분간 피그마를 넘을만한 툴이 나올지 모르겠다.

UI를 하면서 자연스럽게 접하게 되는 분야가 있다. 디자인시스템. 디자인시스템에 재미를 느껴 공부하고 만들어 봤던 것들이 나에게 도움이 많이 된 순간들도 있었다. 면접에도 아주 도움이 되었고. 그래서 아직도 디자인시스템 관련된 영상이나 유료강의, 책들은 찾아서 보는 편인데 최근에 산 책 중에 가장 맘에 드는 책이 있다. 디자인시스템 그 기본에 해당한다고 보면 된다.

 

UI 컴포넌트 오픈북

 

For Android라고 되어 있지마 크게 신경 쓰지 않아도 된다. 안드로이드와 iOS는 컴포넌트를 지칭하는 이름이 다르긴 하지만 실무에서는 혼재해서 쓰는 경우도 많기 때문에 아마 익숙한 용어들이 대부분일 것이다. 그리고 이 책은 기초나 기본 쓰임, 용어에 관한 책이기 때문에 어렵지 않게 이해할 수 있다. 이 책을 가장 칭찬하는 건 어렵지 않다는 거고 이해하기 쉽게 써줬다는 것이다. 이런 점을 높게 평가하고 싶다.

 

UI Book답다. 프롤로그도 흥미롭다.

 

"더 많은 디자이너들이 더 오래, 행복하게 디자인할 수 있도록"이란 모토가 너무 맘에 든다. 이 책은 OPENPATH라는 회사에서 만들었는데 UI를 하고 있는 디자이너라면 한 번은 들어봤을법한 회사다. 모른다면 지금 당장 검색해도 좋을 거 같다. 아주 좋은 강의가 많다.

오픈패스가 이 책을 만든 이유중 하나가 디자이너들의 자리를 보니 각자 중요한 걸 메모해 놓은 메모가 제각각이기도 하고 붙여놓은 자리, 명칭과 방법 등이 다양하고 통일되지 않아서 누구나가 겪을 수 있는 고민일 수 있겠다고 생각해 하나로 모아 가이드로 만들고 빠르고 편하게 볼 수 있도록 만들었다고 했다. 

목차만 봐도 대충은 감이 온다.

 

아주 이해하기 쉽게 정리되어 있다.

 

책을 보면 술술 넘어간다. 어렵지 않게 풀어 놓은 점에 정말 칭찬해 주고 싶다. 너무 전문적인 용어들이 남발되고 어렵게 설명하는 건 정말 싫다. 배우려는 상대방에게 가장 쉽고 빠르게 이해할 수 있게 해 주는 게 가장 효과적인 지식의 전달 방법이다. 나도 누군가에게 내가 가진 지식들을 설명할 때 되도록이면 쉬운 단어들로 설명한다. 그럴 때 상대방은 가장 쉽게 이해하고 피드백을 준다. 이해하기 쉽다고. 이 책 역시 그렇다.

 

UI 디자인 오픈카드와 피그마 단축키.

 

그리고 UI 디자인오픈카드도 같이 구매했다. 유용할 거 같아 같이 구매했다. 구매도 아마 텀블벅에서 했던 걸로 기억한다. 지금은 둘 다 판매를 하지 않는거 같은데 꾸준히 재판매를 하는 거 같다. 관심이 있다면 꾸준히 지켜보는 것도 좋을 듯하다.

 

세 가지 파트로 구분되어 있다.

 

오픈카드 세운 모습.

 

오픈카드는 이렇게 세워서 사용한다. 보기 쉽게 바로 뽑아서 볼 수 있도록 만들어 놨다. 설명서를 보고 어떻게 사용하는지 세워보면 된다. 어렵지 않게 할 수 있다. 이 부분도 정말 칭찬해 주고 싶다. 아는 것도 끄집어내려면 기억이 나지 않는 것들이 많은데 이렇게 바로바로 찾아서 보면 된다. 나에겐 너무 도움이 되는 카드다. 슬프지만 기억력이 나빠지는 것도 한 몫하고.

 

오픈카드는 이렇게 구성되어 있어요.

 

카드는 엘리베이션, 파운데이션, 컴포넌츠 세 파트로 구성되어 있다. 조합을 통해 각종 요소들을 만들어내는 컴포넌트, 크기와 높낮이 등등을 설명하는 엘리베이션, 컴포넌트를 구성하는 아주 작은 기본 요소들에 대해서 잘 설명되어 있다.

신입이거나 얼마 되지 않은 경력자들에게 질문을 많이 받는 게 있다. 같은 걸 다양하게 부르거나 서로 다르게 명시해 헷갈린다고. 뭐가 맞는 거냐는 질문을 가장 많이 받는다. 답은 다 맞는 거다. 정확이 이건 맞고 이건 틀리다고 정의할 수 없다. 이름뿐 아니라 실제 작업하는 어떤 방식에서도 정답은 없다. 디자인에 제약을 걸어서도 안되고. 세계적인 메이저 회사에서 내놓은 디자인시스템도 정답은 아니다. 자신들이 만들어 내놓은 플랫폼에 대한 정리? 정도라고 보면 딱 맞지 않을까 싶다. 이 오픈북이나 오픈카드도 정답은 아니다. 참고 사항이고 합리적으로 정리해 놓은 것일 뿐. 각자 일 하는 곳에서 같이 일 하는 사람들끼리 어긋나지 않게 정의를 하는 게 가장 정답에 가깝다. 그렇다면 평균적으로 A라고 부르는걸 우리는 B라고 부르자는 오차 범위를 줄여주는 가이드북이 있으면 좋겠다. 이 오픈카드와 오픈북을 그 가이드로 사용하면 된다. 평소에 공부하는 게 어렵다면 책상에 놓고 궁금할 때만 꺼내봐도 큰 도움이 될 거다.

 

나 역시 지금도 궁금한 점이 많다. 디자인시스템에 대해서. 언어로 인해 접근성에 한계가 있고(사실 이게 전부일 듯) 그 의도를 정확하게 파악하지 못하는 부분들도 많다. 그래도 모르는 거 보단 나을 거 같다며 이해하려 노력해 보기도 하지만 명확히 답을 얻는 건 아니다. 수학처럼 정확한 답이 나오는 게 아니니. 이래서 어른들이 공부는 끝이 없다고 했나 보다.

'정보' 카테고리의 다른 글

너가 없애 주겠니? 인쇄 PTSD, 네온라이크.  (0) 2024.05.13

댓글