인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
디자인 · 아트

/

UX/UI

피그마 아토믹 컴포넌트 디자인 시스템으로 MVP 만들기

아토믹 컴포넌트 시스템을 활용하여 MVP를 기획부터 디자인까지 완료 해 보는 클래스입니다. 디자인 컴포넌트를 이해하고 활용할 수 있게 됩니다.

(5.0) 수강평 1개

수강생 41명

Thumbnail

초급자를 위해 준비한
[UX/UI, Figma] 강의입니다.

이런 걸
배워요!

  • 피그마 기초

  • 컴포넌트 시스템

  • MVP 기획

  • 애자일 프로세스

  • 아토믹 디자인

피그마 아토믹 디자인 컴포넌트 시스템으로 MVP 만들기



AI가 1초만에 디자인, 카피, 코드를 짜는 시대입니다.
디자인만 할 줄 아는 디자이너 / 기획만 할 줄 아는 기획자 / 개발만 할 줄 아는 개발자는
더이상 AI 시대를 이겨낼 수 없습니다.


어떻게 해야 '대체 불가능한 사람'이 될 수 있을까요?
빠르고 효율적으로 MVP를 만들고, 가설을 검증해 보는 애자일 방법론을 학습하는 것입니다.

결국 기획적 사고가 뒷받침되지 않은 프로덕트 (mvp)은 껍데기일 뿐입니다. 10개 중 7개의 서비스가 5년 안에 사라져요. 기획, 디자인, 개발, 비즈니스 모델이 따로 놀고 있기 때문이죠.


figma의 컴포넌트 시스템을 활용하여 빠르게 MVP를 제작하는 스킬을 얻게 된다면
한 달에 하나씩 프로덕트를 만들 수 있게 됩니다!
저 또한 제가 만든 피그마 컴포넌트 셋을 활용해서 짧게는 한 달, 길어도 1분기 내 프로덕트를 연속적으로 런칭하고 있습니다. 하기로의 mvp 구경하기

이런 분들께 추천해요

피그마 및 컴포넌트 활용을 배우고 싶은 예비 / 현 UI 디자이너

프로덕트 제작 전 과정을 배우고 몸 값을 높이고 싶은 메이커

MVP를 제작해 보고 싶은 예비 / 현 스타트업 종사자


수강 후에는

  • Figma로 모바일 디자인 MVP를 기획하고 디자인할 수 있게 돼요.

  • 단순히 똑같이 따라하기가 아닌, 왜 그렇게 해야하는지 이유를 알 수 있어요.

  • Figma만의 기능을 100% 활용하고, 노가다는 그만해요.

  • UI 라이브러리 및 아토믹 디자인 시스템을 이해하고 활용할 수 있게 돼요.

  • 애자일/린 스타트업 서비스 기획 및 디자인 전 과정의 에센스를 빠르게 파악할 수 있어요.

  • 디자이너가 아니더라도 와이어프레임을 피그마로 그릴 수 있게 돼요.

  • 피그마 커뮤니티의 템플릿 소스를 좀 더 자유롭게 활용할 수 있게 돼요.

이 강의의 특징

10년차 디자이너의 문제 정의 - 와이어프레임 - 디자인 프로세스 노하우를 가져가세요.

이론과 실무의 비율이 적절해요

디자인 예제가 이뻐요

바로 mvp를 만들어볼 수 있는 컴포넌트 템플릿을 드려요

이런 내용을 배워요

설마 아직도 레이어 기반으로 만들고 있는거 아니죠?

프레임을 먼저 그리고 개체를 넣고 있나요? 아직도 stroke를 써서 디자인하는거 아니죠? 오토 레이아웃을 쓰긴 쓰는데 100% 이해하고 있지는 않다면 꿀팁들을 얻어갈 수 있어요.

R이나 A가 아닌, shift + a 로 시작합니다.

배리언트, 스왑 인스턴스, 불린, 아토믹 컴포넌트

컴포넌트의 기본인 배리언트 사용법과 스왑 인스턴스, 불린으로 flexible component, 컴포넌트 안의 컴포넌트인 아토믹 디자인 시스템을 배워요. 아토믹 컴포넌트란 하나의 컴포넌트를 원자 단위, 분자 단위로 쪼개는 것을 말해요. 극강의 효율을 추구하는 개발 방법론 중의 하나를 배워보세요! (*주의 : 아토믹 시스템은 디자인/개발 방법론 중의 하나이며 궁극의 기술은 아닙니다)

다른 컴포넌트 소스를 이해하고 컨트롤 할 수 있게 됩니다

단계적으로 디자인하는 과정을 반복해서 보여드립니다. 

1단계는 레이어 베이스로 디자인하기 
2단계는 오토 레이아웃으로 디자인하기
3단계는 배리언트와 불린 활용
4단계는 컴포넌트 안에 컴포넌트 넣기. (아토믹 디자인)

100% 컴포넌트 베이스로 디자인할 수 있도록 꾸려봤어요. UI 라이브러리가 왜 필요한지, 컴포넌트 베이스로 디자인한다는 것이 도대체 무슨 소리인지 알 수 있는 것은 덤이죠. 

100% 컴포넌트 베이스 디자인

10년차 디자이너 출신의 PO / Designpreneur.

  • 초기 스타트업과 에이전시 경험을 통해 규모에 적합한 서비스 기획/디자인 방법론이 따로 있다는 것을 깨닫고 자신만의 노하우로 mvp 제작법을 개발했습니다.

  • 초기멤버로서 시리즈 B, 창업멤버로서 bep 달성, 디자인 창업가로서 기획부터 디자인, 마케팅까지 올인원 프로세스로 부트스트래핑 여정 중입니다.

  • 평균 1분기에 1개의 프로덕트를 런칭합니다.

  • 브런치에서 글을 씁니다.

궁금한 점이 있나요?

이 강의는 2024년 6월 이후의 최신 피그마 인터페이스를 반영하고 있지 않습니다. (강의 업데이트 계획도 없습니다) 처음으로 피그마를 접하는 사람들보다는, 아토믹 컴포넌트를 실무에서 어떻게 만들고 활용하는지에 학습이 궁금하신 분들만 수강해주세요!!

Q. 디자이너가 아닌데도 듣고 이해할 수 있나요?

디자이너 중점이긴 하지만, mvp를 제작하고 싶은 사람들을 대상으로 기획 했습니다. 스스로 제품을 기획해서 런칭해 보는 부트스트래핑, 초기/창업 멤버에 관심있는 분들, 애자일 방법론으로 프로덕트를 개발해 보고 싶은 분들이 들으시면 좋습니다. 입문자 대상이기 때문에 이론 강의는 브로드하며, 누구나 쉽게 이해하실 수 있습니다. (중급자 분들이 들으시면 곤란합니다)

Q. 이론이 중점인가요, 피그마 실무 강의가 중점인가요?

피그마 실무 강의가 중점입니다. 이론만 나열하는 강의보다는 피그마의 기본은 확실히 알려주어야 한다고 생각했어요. 컴포넌트 섹션은 피그마를 처음 접한 사람이 난이도 1단계에서 5단계 아토믹 디자인까지 반복 학습을 통해 컴포넌트 이해도를 높인다는 가정으로 구성하였어요. 듣기만 하면 끝나는 편한 이론 강의만 기대하신 분들은 어렵다고 느끼실 수 있습니다. 실습을 하지 않으면 얻어가시는게 적어요!

Q. 다른 피그마 강의랑 무엇이 다른가요?

'왜 그렇게 해야하는지' 이유를 알려드리는 데 포커싱하였습니다. 그냥 '따라 하세요'가 아니라, 이렇게 하는 이유는 이것이고, 이렇게 해야 원하는 결과를 얻습니다- 라는 식으로 설명합니다!

수강 전 참고 사항

준비물

  • 새로운 영역을 개척하고 싶은 호기심과 열정만 가져오세요. 아, 인터넷이 되는 컴퓨터도요.

학습 자료

  • 브런치 칼럼과 유튜브 아웃링크를 제공합니다.

  • 영상에 사용되는 pdf 자료를 다운할 수 있습니다.

선수 지식 및 유의사항

  • 제공되는 ui 템플릿은 변형 및 가공하여 마음껏 사용할 수 있습니다.

  • ui 템플릿을 공유하는 것은 허용하지 않습니다.

  • 자신의 기초 지식 및 레벨, 학습 의지에 따라 강의 난이도가 상이하게 느껴질 수 있습니다.

  • 아주 친절하고 쉬운 레벨은 아닙니다. 속도도 약간 빠를 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 피그마를 처음 접하는 사람

  • MVP 기획 및 디자인을 한 번에 하고 싶은 사람

  • 왜 그렇게 만들어야 하는지 이유가 궁금한 사람

  • 실무 디자인 프로세스가 궁금한 기획자, 개발자, 마케터

  • 애자일 프로세스 실무를 이해하고 싶은 사람

안녕하세요
Hagiro입니다.

10년차 디자이너 출신의 PO / Designpreneur.

  • 초기 스타트업과 에이전시 경험을 통해 규모에 적합한 서비스 기획/디자인 방법론이 따로 있다는 것을 깨닫고 자신만의 노하우로 mvp 제작법을 개발했습니다.

  • 초기멤버로서 시리즈 B, 창업멤버로서 bep 달성, 디자인 창업가로서 기획부터 디자인, 마케팅까지 올인원 프로세스로 부트스트래핑 여정 중입니다.

  • 평균 1분기에 1개의 프로덕트를 런칭합니다. 하기로의 mvp 원씽메모

  • 브런치에서 글을 씁니다.

커리큘럼

전체

31개 ∙ (5시간 27분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!