UX/UI 디자인 베이직 참고 자료
프로덕트 디자인 직군이나 UX/UI 디자인에 관심이 있으신 분들이 기본적인 이론 및 활용에 도움이 될 만한 사이트를 공유합니다. 저도 많이 도움을 받았던 사이트들이에요!
리메인은 디자인 VOD 클래스를 제공하는 서비스인데요. 리메인에서 자체적으로 UX/UI 디자인과 관련하여 필수적으로 알아야 할 내용들을 요약적으로 정리해주셨네요. 가끔씩 그거 뭐였더라? 하고 기초 이론에 대해 찾아 보기에도 좋고 UX/UI 디자인이 처음이신 분에게도 어떤 내용들을 익혀야 하는지 대략적으로 파악하기 좋기 때문에 추천하는 사이트입니다.
국내 모바일 서비스 UI를 확인할 수 있는 사이트입니다. 실제 모바일 UX/UI 디자인할 때, 래퍼런스 확인이 필수적인데 최근에 UI Bowl 이라는 사이트가 오픈 되었고 많은 도움을 받았어요. 직접 앱 설치를 하지 않아도 간편하게 산업 별, 태스크 별로 화면을 볼 수 있어 빠른 리서치가 가능합니다.
비슷한 기능들을 다른 서비스는 어떻게 풀고 있는지, 폰트나 그리드 등을 어떻게 활용해 계층 차이를 줬는지 등 서비스를 분석해 보는 것 많으로도 인사이트를 많이 얻을 수 있는 것 같아요.
비슷한 사이트로, 국내의 모빈이라 불리는 WWIT에서도 많은 도움을 받았는데요. 최근에는 국내 서비스를 대상으로 UX/UI를 확인할 수 있는 다른 래퍼런스 사이트들이 많이 생기고 있으니 찾아보시면 좋을 것 같아요 :) 아래 UI 보울 외에도 몇 개 더 남겨볼게요. (감사합니다 증말)
피그마 튜터(이하 피튜)님이 운영하시는 피그마 관련 아카이빙 사이트에요. 피그마 디자인하며 생길 수 있는 다양한 실무 궁금증과 더불어서 피그마 활용 방법, 플러그인 등 UX/UI 디자인 시의 다양한 정보를 얻을 수 있어요. 피튜님이 운영하시는 오픈카톡도 있는데, 거기에 실시간으로 다른 디자이너 분들과 피그마 관련 질문이나 조언 등을 주고 받을 수도 있어요. 저도 오픈카톡방에서 다른 디자이너 분들께 많은 팁을 얻었던 터라 굉장히 감사한 마음이 있는데요, 오픈카톡에 참여하지 않으셔도 아래 피그마피디아에서 다양한 정보를 찾아 보실 수 있을 거예요.
개인적으로 제가 좋아하기도 하고 많은 도움을 받은 해외 디자이너의 유튜브 채널인데요. Figma와 Framer 활용에 많은 도움을 얻을 수 있으실거예요. 저도 툴 활용에 있어서 기초를 쌓을 때 이 분의 영상을 통해 많은 도움을 받았답니다. 아쉬운 점이 있다면, 영상이 모두 영어라는 점인데요. 요즘엔 유튜브가 조금 어설프긴해도 한글 자막도 자동번역하여 제공하는 듯하니 필요한 정보가 있다면 활용해 보셔도 좋을 것 같아요.
피그마에서는 기능을 직접 사용해보고 이해할 수 있도록 'Figma Playground' 라는 이름으로 자료들을 제공하고 있는데요. Varients, Auto Layouts 부터 Dev mode, Variables 와 같이 새로 나온 기능들도 바로 활용할 수 있도록 직접 해보기! 같은 교재라고 생각하시면 됩니다.
그런데 Figma에서 제공하는 이 자료들은 모두 영어라서 읽고 해석하는데 조금 시간이 걸리는데요. 아래 코코모님께서는 그 자료들을 한글로 해석해서 공유해주시고 있어요. 저도 정말 많은 도움을 받았었기에 공유해봅니다. (감사합니다 증맬..)