[인프런 워밍업 스터디 1기 디자인] 4주차 - 모드를 활용해서 실전 페이지 만들기

길었던 4주가 지나고 인프런 워밍업 클럽 스터디 1기 수료의 시간이 다가왔습니다. 지난 한 주 동안 배운 것을 돌아보고 워밍업 클럽을 회고해봅니다. 지금까지 디자인 토큰들을 피그마 베리어블에 등록하고 베리어블을 사용해서 기본 컴포넌트부터 복합 컴포넌트까지 페이지를 만들기 위한 재료를 준비했습니다. 이제 본격적으로 요리를 시작해봅시다. 베리어블 모드베리어블 모드를 사용하면 모드에 따라 베리어블의 값을 변경할 수 있습니다. 예를 들어 어떤 페이지를 있습니다. 이 페이지는 미리 등록한 베리어블을 사용해서 만들었기 때문에 베리어블의 값을 수정하면 수정한 베리어블을 사용한 모든 부분이 수정됩니다. 그럼 베리어블을 라이트 모드일 때, 다크 모드일 때 값을 미리 정의해두고 어떤 페이지가 라이트 모드인지 다크 모드인지 알려주면 모든 값이 모드에 따라 값이 변하겠죠? 모드 적용하기위의 로그인 페이지는 어떻게 만들었을까요? Light 모드를 만든 다음에 복사해서 프레임의 Layer 창에서 모드를 Dark로 설정했습니다. (Light/Dark 모드 외에도 Mobile, TV 같은 다른 모드가 적용된것도 볼 수 있습니다.) 다크 모드전체 페이지에서 모드를 설정하는 것만으로 모든 컬러가 모드에 맞게 변경되는 것은 베리어블을 모드에 따라 미리 정의해두었기 때문입니다.Light, Dark 외 다른 theme 을 추가하고 싶다면 + 버튼을 눌러 추가할 수 있습니다. 반응형 모드위 예시에서 Dark 뿐만 아니라 Mobile, TV 모드도 적용된 것을 보셨습니다. 모드는 한 번에 여러 모드를 적용할 수도 있습니다. 이를 활용하면 여러 기기에 따른 반응형 디자인, 멀티 브랜드도 구현할 수 있습니다. 이것은 다양한 기기에 따라 최소/최대 크기와 헤더의 컴포넌트 구성을 다르게 할 수 있도록 모드로 구성한 베리어블입니다.어떤 페이지의 max-width 값과 min-width 값을 등록한 베리어블로 설정하고 모드만 변경하면 세부적인 값을 신경쓸 필요가 없습니다. 멀티 브랜드멀티 브랜드도 모드를 활용해 구현해볼 수 있습니다..theme 컬렉션에는 브랜드에 따라 4가지 모드를 만들었습니다. color/brand 베리어블은 모드가 변경되면 다른 브랜드 컬러를 갖게 됩니다..theme 컬렉션은 숨겨져 있어서 컴포넌트를 만들거나 페이지를 만들때 드러나지 않습니다.실제로 컴포넌트를 만들때는 semantic 이라는 컬렉션을 사용하는데 여기 bg/brand 베리어블은 라이트 모드일 때 color/brand/600 베리어블을 사용하도록 했습니다.지금은 bg/brand 의 값이 blue 계열이지만 어떤 페이지의 모드가 TV 가 된다면 teal 계열로 바뀝니다. 이것이 semantic 에는 멀티 브랜드 모드가 없어도 멀티 브랜드가 적용되는 원리입니다. 회고디자인 토큰, 컴포넌트, 모드 같은 개념들을 잘 사용할 수 없다면 복잡한 애플리케이션의 화면을 구성하는 것은 정말 힘든일입니다. 잘 정리된 방법론과 피그마라는 최신 툴을 사용해서 디자인 시스템을 갖추고 나면 좋은 서비스에 좀 더 집중할 수 있습니다. 4주간의 인프런 워밍업 클럽 스터디를 통해 피그마의 전반적인 사용방법과 디자인 시스템을 만들고 화면을 만드는 방법을 배울 수 있었습니다. 앞으로의 사이드 프로젝트가 기대됩니다. 스스로 완주를 축하하며 다른 러너분들에게도 축하의 말씀을 전합니다.우리 모두 스스로를 진심껏 축하하고 사랑해줍시다.행복하세요! 😃

[인프런 워밍업 스터디 1기 디자인] 3주차 - 컴포넌트 만들기 2

지난 주에 이어 컴포넌트 만들기를 계속 진행했습니다. 다양한 컴포넌트들을 만들어 보니 자신감도 생기고 Figma 툴도 점점 능숙해져 갑니다. 과제가 다 끝나고 빨리 사이드 프로젝트를 시작해보고 싶습니다. Card 컴포넌트컨텐트를 표현하기 좋은 Card 컴포넌트 입니다. 단순한 형태로 만들어서 현재는 이미지, 제목, 부제목, 설명, 버튼만 넣고 뺄 수 있습니다. 그러나 좀 더 확장성 좋은 구조로 개선할 수 있어 보입니다. 나중에 연습해볼 Modal 컴포넌트에서 Slot 을 활용해 확장성이 좋은 컴포넌트를 만들었는데 참고하면 좋을 것 같습니다. Modal 컴포넌트Slot 을 활용해서 해당 Slot 에 다른 컴포넌트를 넣을 수 있도록 확장성 있게 설계했습니다.이 모달 컴포넌트를 사용해서 다양한 모달을 구현했습니다.그러나 확장성을 위해서 너무 자유도 높은 컴포넌트를 설계하면 사용할 때 오히려 불편합니다. 그래서 변하는 부분과 변하지 않는 부분을 구분하는게 중요합니다. 이 Modal 컴포넌트는 인스턴스를 만드는데 바로 사용되기 보다 다양한 모달 컴포넌트를 만들기 위한 재료로 사용되면 좋을 것 같습니다. Toast와 Alert 컴포넌트Toast 와 Alert 은 쓰임새가 비슷해서 좀 헷갈립니다. uiguideline.com 에서 제공하는 정의를 통해 구분지어 봅시다. Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, top-center, bottom-left, bottom-center, or bottom-right). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform. Disappear automatically or can be dismissed by the user.Generally, an alert displays a prominent message at the top of the screen. It could be used to promote a new feature or provide action-based feedback messages. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any timeToast 는 주로 화면의 오른쪽 상단에서 떠오르고 짧고 간결한 메세지를 담고 있습니다. 사용자 행동에 즉각적인 피드백이나 애플리케이션이 잘 동작하고 있음을 알려주는 정보를 담습니다. 자동으로 사라지거나 사용자에 의해 없앨 수 있습니다. Alert 은 화면 상단에 눈에 띄는 메세지를 보여줍니다. 새로운 기능이나 사용자 행동을 수반하는 피드백 메세지를 담을 수 있습니다. alert은 영구적이고 모달처럼 동작하지 않기 때문에 사용자가 언제든지 무시하거나 반응할 수 있습니다. 핵심은 Alert 은 자동으로 닫히지 않고 화면 상단에 위치하지만 Toast 는 화면 가장자리에서 즉각적으로 튀어나와서 자동으로 사라질 수 있다는 것입니다. 이제 두 컴포넌트를 구분해서 사용할 수 있을 것 같습니다. Table 컴포넌트테이블 컴포넌트는 복잡할 줄 알았는데 생각보다 쉬웠습니다. 테이블을 구성할 요소들을 나누어 part 컴포넌트로 나누고 조합하면 금방 테이블이 만들어집니다. 3주동안 과제를 진행해보며평균적으로 하루동안 봐야할 강의는 1시간 정도이고 이를 연습해보고 미션까지 수행하는 것은 저에겐 3시간은 필요한 것 같습니다. 매일 4시간씩 과제를 한다는게 정말 쉽지 않은 일인데 스스로 대견하다는 생각도 듭니다. (물론 저는 지금 이틀정도 밀려있습니다.) 밀리지 않고 진도에 맞춰서 진행하는 다른 인프러너분들 정말 존경합니다. 이제 진짜 일주일도 안남았는데 끝까지 완주해서 오마카세 먹으러 갈랍니다. (OT 때 스스로 정하신 자기 보상 기억하시죠? 저도 방금 문득 생각났습니다ㅎㅎㅎ) 그럼 모두 화이팅 🔥

[인프런 워밍업 스터디 1기 디자인] 2주차 입력 컴포넌트, 디스플레이 컴포넌트

드디어 Figma의 꽃이라고 할 수 있는 컴포넌트 만들기를 시작했습니다. 익숙해지면 너무 쉽고 당연한 것들이지만 처음에 익숙해지기까지 정말 헷갈리고 복잡합니다. 그러나 컴포넌트를 하나 둘 따라 만들다 보니 점점 속도도 빨라지고 재미있었습니다. 컴포넌트 만드는 요령1. 현재 알고 있는 모든 프로퍼티를 가진 가장 복잡한 형태의 컴포넌트를 만든다.어떤 컴포넌트들은 아주 복잡해서 프로퍼티가 아주 많을 수 있습니다. 프로퍼티들을 모두 활성화 했을때의 가장 복잡한 형태의 컴포넌트를 만들어봅니다. 2. 모든 프로퍼티를 등록해준다. 3. 인스턴스를 만들어서 테스트하면서 기본 컴포넌트를 수정한다.다양한 Variants 를 만들기 전에 꼭 인스턴스를 만들어서 기본 컴포넌트를 테스트해보는것이 좋습니다. 여러 프로퍼티들을 껐다 켜보고 크기도 늘렸다 줄여보고 할 수 있는건 다 해봅니다. 테스트해보면 꼭 생각하지 못한 오류가 발견되는데 개발할 때랑 비슷해서 재밌었습니다. 컴포넌트가 작을 때 수정해야 여러 컴포넌트를 조합해서 복잡한 컴포넌트를 만들 때 고생하지 않습니다. (단위 테스트의 중요성!) 새롭게 알게된 것디자인 패널에 Absolute positioning 버튼을 누르면 position: absolute 로 만들 수 있습니다!Constraints 에서 Left and right 를 해주면 부모요소가 늘어남에 따라 자식요소도 함께 늘어납니다!Constraints 에서 Bottom 을 해주면 하단에 요소를 고정시킬 수 있습니다. 부모가 Auto Layout 이면 자식요소의 Contraints 적용이 불가능합니다.부모 요소의 width 를 Fixed 로 하고 자식 요소의 width 를 Fill 로 설정하면 부모 요소의 크기가 변할 때 마다 자식 요소가 늘어납니다.

[인프런 워밍업 스터디 1기 디자인] 피그마 배리어블과 파운데이션

회사에서 프로젝트가 하나 둘씩 늘어가면서 일관성 없는 UI/UX 가 생겨나고 디자인 시스템이 있으면 좋겠다는 생각을 했습니다. 마침 사랑하는 인프런에서 피그마 배리어블을 활용한 디자인 시스템 구축 스터디를 모집하고 있었고 즐거운 마음으로 참여하게 되었습니다. 디자인 시스템이란? A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications.[1] Design systems aid in digital product design and development of products such as mobile applications[2] or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.[3]-출처: https://en.wikipedia.org/wiki/Design_system살펴보면 디자인 시스템을 구축하기 위해서는pattern/components librariesdesign languages/brand languagesstyle guidescoded componentsdocumentation같은 것들이 필요한 것을 알 수 있습니다. 이 강의에서는 무엇을 배우나?인프런 워밍업 스터디 1기에서 학습하는 피그마 배리어블을 활용한 디자인 시스템 구축하기 - 볼드 UX 에서는 피그마로 디자인 시스템을 구축하기 위해 다음과 같은 것들을 배웁니다.피그마 배리어블디자인 파운데이션 만들기 (font, color, spacing, effect, breakpoint, border, elevation, etc)피그마로 컴포넌트 만들기 (엄청 많이 만듬)모드(light, dark)를 설정해서 배리어블 제대로 활용하는 방법[B2B] e-commerce admin page 만들기[B2C] e-learning page 만들기우리도 당장 적용해야 할까?디자인 시스템을 적용한다고 해서 갑자기 생산성이 좋아지고 일관적인 디자인으로 정리되는 것은 아닙니다. 오히려 생산성이 떨어지겠지요. 프로젝트 기간이 부족하거나 규모가 작을 경우에는 디자인 시스템을 적용하지 않는 편이 더 좋을 수도 있습니다. 디자인 시스템을 구축하는 것만으로도 시간과 노력이 많이 들어가기 때문입니다. A Design System isn’t a Project. It’s a Product, Serving Products.- Nathan Curtis 그러나 디자인 시스템이 안정적으로 도입되고 나면 생산성이 훨씬 높아질것이라 기대합니다. 디자이너의 생산성 뿐만 아니라 기획자, 개발자 등 팀 간의 의사소통도 쉬워지니 전체적인 생산성이 높아지겠지요. 디자인 시스템은 누가 만드나요?디자인 시스템은 디자이너 혼자 만드는 작업이 아닙니다. 디자인 시스템이 프로젝트 전체 팀원간의 소통 도구가 되고 제품 인터페이스의 기반이 되려면 디자이너, 개발자, 비즈니스 간의 효과적인 커뮤니케이션이 중요합니다.코드화된 컴포넌트까지 디자인 시스템에 포함하기 위해 개발팀과 긴밀히 소통해야 합니다. 개발팀에서 현재 프로젝트에서 사용하고 있는 UI 관련 라이브러리를 파악하고 이 라이브러리에서 제공하는 디자인 토큰을 디자인팀에서 반영해야 하면 개발과 디자인 단계에서 큰 도움이 될 수 있습니다.예를 들어 팀에서 tailwindCSS를 사용하고 있다면 tailwindCSS의 디자인 토큰을 디자인 시스템에 반영한 후 디자인 시스템을 구축해 나간다면 좀 더 빠르게 진행할 수 있습니다.무엇보다 디자인 토큰의 이름을 공유해서 디자인팀과 개발팀이 처음부터 같은 용어를 사용한다면 디자인 핸드오프 과정이 한결 쉬워질 것입니다. 디자인 토큰과 피그마 배리어블디자인 토큰은 모든 UI 요소의 기본 구성 요소로 진실의 근원의 역할을 하는 작고 반복 가능한 디자인 결정입니다. 다시 말해, 가장 작은 단위의 디자인 결정을 미리 해두는 것입니다. 예를 들면 색상을 미리 골라둔다거나 여러 가지 폰트 속성을 미리 정의해두는 것입니다. font, color, spacing, effect, breakpoint, border, elevation 등등 다른 디자인 요소들도 토큰화할 수 있습니다.피그마 배리어블은 이런 디자인 토큰들을 변수로 관리할 수 있는 기능을 제공합니다.프로그래밍에서 변수를 만들 때 가장 중요한 것은 변수명을 짓는 것입니다. 이 변수가 의미하는 것이 무엇인지 이름을 잘 지어야 다른 개발자에게 존경받습니다. 이렇듯 디자인 토큰을 변수로 관리한다는 것은 디자인 토큰에 이름을 지어준다는 의미도 됩니다. 파운데이션 만들기여러 종류의 디자인 토큰을 정의하고 문서화해서 파운데이션을 만듭니다. 피그마 배리어블을 사용해 컬러 파운데이션을 만드는 과정을 좀 더 살펴보겠습니다. 피그마 배리어블은 컬렉션에 저장할 수 있습니다. 컬렉션은 여러개를 만들 수 있습니다. 이 컬렉션을 레이어처럼 사용해서 primitive, theme, semantic 같은 이름으로 3개의 컬렉션을 만듭니다. primitive 컬렉션에는 이 세상에 존재하는 모든 색상 중 사용하고 싶은 색상만 모아서 담아줍니다. 이 때 이름은 보편적인 이름으로 짓습니다. theme 컬렉션에는 브랜드 컬러에 맞는 색상들을 primitive 컬렉션에서 골라 담습니다. 이 때 이름은 브랜드 컬러의 관점에서 짓습니다. 마지막으로 semantic 컬렉션에서는 실제 컴포넌트 디자인에서 사용할 색상들을 theme 컬렉션에서 골라 담습니다. theme 컬렉션에 없으면 primitive 컬렉션에서 담아도 괜찮습니다. 이 때 이름은 컴포넌트 관점에서 짓습니다. 이렇게 계층 구조로 배리어블 컬렉션을 만들고 primitive 나 theme 컬렉션은 배리어블 사용 시 드러나지 않도록 숨긴 후 semantic 컬렉션의 배리어블을 사용해서 컴포넌트와 페이지를 만듭니다. 피그마 플러그인앞에서 살펴본 디자인 토큰 배리어블 등록 과정에는 단순 반복 작업이 다소 포함되어 있습니다. 그러나 피그마에는 재미있고 편리한 플러그인들이 많아 이 등록과정이나 문서화 과정을 쉽게 할 수 있는 방법도 있으니 이런 방법을 사용하는 것을 강력 추천드립니다. 인프런 워밍업 클럽 1주차 후기지식공유자 볼드님과 인프런이 준비를 너무 잘해주셔서 서로의 학습을 응원하며 재미있게 작업을 진행하는 분위기가 만들어졌습니다. 이런 커뮤니티가 저에게는 학습 뿐만 아니라 일상의 소소한 즐거움을 줍니다. 워밍업 클럽에 참여하신 모두 완주하길 바라며 수료식에서 한 단계 성장한 모습으로 만났으면 좋겠습니다. 화이팅 🔥