강의

멘토링

로드맵

Inflearn brand logo image
Design

/

UI/UX

Mastering Responsive UI Design with Figma

Do you want to master responsive design by effectively utilizing Figma's Auto Layout, Grid, and Constraints features? In this lecture, you will gradually develop the skills to create responsive designs, from small UI elements to cards, tables, components, and web and app screens. Learn how to use Figma immediately for job preparation and practical work, and master the ability to design responsive interfaces optimized for various devices!

(5.0) 2 reviews

45 learners

  • uxeric
반응형디자인
UXUI
피그마
오토레이아웃
취업
Figma
Responsive Web
ui
ux
get a job

What you will learn!

  • Equip with skills from responsive design concepts to practical application.

  • Master Figma's gem, "Auto Layout," for responsive design.

  • Figma's Auto Layout, Grid, and Constraints will make small UI elements, cards, and components responsive.

  • Can design both web and app responsively.

  • You will gain "responsive" design capabilities, enabling flexible adaptation to diverse device environments with a single design.

  • You can more effectively deliver design handoffs to developers and stakeholders.

띠배너

입문자/취준생이 반응형 디자인을 "꼭" 마스터해야 하는 2가지 이유🤔


첫번째 이유. 실무자/면접관이 중요하게 생각하는 중요한 능력이기 때문에. 취업을 위한 필수 역량(!)

제가 현업에서 프로덕트 디자인 실무자이자 면접관으로, 그리고 입문자분들을 대상으로 UX코칭을 하면서 얻은 한가지 인사이트가 있습니다. "취업을 하고 싶다면 지원자가 보여주고 싶은 능력이 아닌, 면접관이 보고 싶어하는 능력이 있어야 한다"는 것이었는데요. 이것은 마치 수능에서 출제자의 의도를 파악해야 한다는 말처럼 너무 당연하고 간단하게 느껴지지만, 실제로 많은 지원자분들이 이것을 제대로 생각해보지 못해서 경험을 쌓으면서 답은


두번째 이유. 엄청난 업무 생산성 향상, 그리고 더 나은 사용자 경험 디자인

오늘날 사용자들은 하나의 기기만 사용하는 것이 아니라, 스마트폰, 태블릿, 노트북 등 다양한 화면 크기의 디바이스를 넘나들며 웹사이트나 앱을 이용합니다. 이러한 환경 속에서 디자이너는 어떤 화면 크기에서도 사용자가 불편함 없이 서비스를 자연스럽게 이용할 수 있도록 설계해야 합니다.

위 Uber의 사례를 보면, 동일한 서비스를 다양한 디바이스에서 사용할 때 인터페이스 구조와 정보 배치는 달라지지만, 전반적으로 일관된 사용자 경험을 유지하고 있다는 것을 확인할 수 있습니다. 이처럼 각기 다른 화면에서도 사용자에게 통일된 경험을 제공할 수 있게 해주는 것이 바로 반응형 디자인입니다.

반응형 디자인을 이해하고 제대로 활용할 수 있으면 업무 생산성이 엄청나게 향상됩니다. 처음부터 화면 크기에 유연하게 대응하는 구조로 설계하고 디자인을 하면, 디바이스별로 별도의 디자인을 반복해서 만들 필요가 줄어들고, 디자인을 재사용하면서 작업 속도가 몇배 몇십배가 빨라집니다. 또한 개발자와의 협업에서도 불필요한 수정이나 커뮤니케이션 비용이 줄어들어, 디자인-개발 간 연결이 훨씬 효율적으로 이루어질 수 있습니다.

결과적으로, 반응형 디자인은 단순히 "잘 보이는 화면"을 만드는 기술을 넘어서, 더 적은 노력으로 더 일관된 경험을 제공하는 실무 핵심 역량입니다.

안녕하세요. 프로덕트 디자이너 에릭입니다. 👋

저는 현재 미국 뉴욕에 위치한 글로벌 테크 기업 TKWW(The Knot Worldwide)에서 시니어 프로덕트 디자이너로 일하고 있습니다. UX리서치부터 UI디자인, 디자인 시스템 구축 및 관리까지, UX/UI 전반을 아우르는 실무 업무를 담당하고 있고 면접관으로서, 지원자의 포트폴리오를 검토하고 평가하는 역할도 맡고 있어요. 그렇기 때문에 입문자나 취업을 준비하는 분들에게 어떤 역량이 실제로 필요한지 잘 알고 있습니다. 그리고 Amazon 베스트셀러에 오른 UX디자인 입문자를 위한 책 『Design thinking for beginners』를 집필하기도 했습니다.


이번 강의를 만들게 된 계기는 제가 실무에서 반응형 디자인과 이를 위한 피그마의 핵심 기능을 제대로 마스터한 이후, 디자인 생산성과 효율성이 몇 배 이상 향상된 경험을 했기 때문이에요. 그 핵심에는 피그마의 오토레이아웃, 그리드, 컨스트레인츠 기능을 활용한 체계적인 화면 설계 방식이 있었습니다.

이전에는 같은 디자인을 화면 사이즈별로 대응하는데 새로 만들고 수정하느라 시간이 너무 많이 들었어요. 하지만 지금은 하나의 디자인으로 다양한 디바이스에 유연하게 대응할 수 있는 반응형으로 UI 디자인 을 구축할 수 있게 되었고, 그 결과 반복 작업은 줄고, 디자이너-개발자 간 협업도 훨씬 매끄러워졌습니다. 저는 저의 경험과 지식, 실무 노하우를 바탕으로 반응형 디자인은 입문자/취준생 분들에게는 취업의 가능성을 크게 높이고, 반응형 디자인을 모르는 현업 디자이너에게는 업무 생산성을 크게 향상시킬 수 있도록 도와드릴 거에요. 이번 기회에 반응형 디자인을 제대로 배우고, 커리어 성장의 기회를 만들어보세요.

이 강의에서는 무엇을 배우게 되나요? 🧑‍🏫

반응형 디자인의 개념과 원리, 제대로 이해하기

왜 반응형 디자인이 필요한지, 어떤 문제를 해결하는지 이론적으로 짚어보며 기초를 탄탄히 다집니다. 디바이스별 사용자 경험 차이를 이해하고, 앞으로의 실습에 기반이 될 핵심 개념들을 명확히 익힙니다.

"오토 레이아웃과 리사이징 옵션", 반응형 디자인을 위한 피그마의 핵심 무기 익히기

피그마의 진짜 힘은 오토 레이아웃과 리사이징 옵션에 있습니다. 실무에서 자주 쓰이는 컴포넌트와 화면을 만들며, 자동 정렬과 유연한 레이아웃 배치의 원리를 실전 사례와 함께 익힙니다.

그리드 시스템 완전 정복

그리드는 반응형 디자인의 숨은 설계도입니다. 다양한 화면 크기에서도 일관된 UI를 구성할 수 있도록 그리드의 원리와 실제 활용법을 체계적으로 배웁니다.

Constraints로 유연한 반응형 오브젝트 만들기

화면이 줄거나 늘어나도 무너지지 않는 레이아웃의 비밀, 바로 Constraints입니다. 다양한 디바이스 사이즈에 대응하는 유연한 오브젝트 구성 방법을 실습과 함께 배워봅니다.

실전 사례로 배우는 반응형 디자인

이론만으로는 부족합니다. 다양한 실제 UI 예제를 통해 지금 당장 실무에 적용할 수 있는 반응형 디자인 감각을 키워보세요.

UI 디자인을 위한 꿀팁🍯 대방출

강의에서는 제가 실무에서 실제로 사용하고 있는 플러그인과 자료들을 아낌없이 공유합니다. 막막했던 반응형 작업이 훨씬 수월해질 수 있도록, 바로 적용 가능한 실전 꿀팁들을 담겨 있습니다.

이 강의를 통해 무엇을 만들어보나요? 📐

웹과 앱 환경에 최적화된 반응형 UI를 직접 설계하고 구현해봅니다. 다양한 디바이스에 자연스럽게 대응하는 실무형 레이아웃을 만들어보세요.

반응형으로 "앱" 디자인하기

모바일 앱 UI가 다양한 화면 크기와 해상도에 어떻게 대응해야 하는지 배우고, 실제 앱 화면을 반응형으로 구현해봅니다.

반응형 "웹" 디자인 만들어보기

웹 환경에서의 반응형 UI 구성 방법을 익히고, 데스크탑부터 모바일까지 자연스럽게 확장되는 레이아웃을 직접 설계해봅니다.

반응형으로 카드 만들기

이미지와 텍스트가 포함된 콘텐츠 카드를 다양한 화면 너비에 따라 자연스럽게 변형되도록 설계해봅니다.

테이블 만들기

정렬, 너비, 셀 구성 등 다양한 상황에 대응할 수 있는 반응형 테이블 UI를 구성하며 실전 디자인 역량을 키웁니다.

반응형으로 만들어보는 UI 컴포넌트

버튼, 입력창 등 실무에서 자주 쓰이는 UI 컴포넌트를 반응형으로 설계해보며 다양한 화면 사이즈에 대응 가능하고 재사용 가능한 구조를 익힙니다.

그 외 다양한 사례 연습

실무에서 자주 마주치는 다양한 UI 상황을 연습하며 반응형 디자인 감각을 넓혀갑니다. 반복적인 실습을 통해 복잡한 레이아웃에도 유연하게 대응할 수 있는 역량을 키웁니다.

이런 분들께 추천해요 🧭

🎯 입문자 / 취준생

반응형 디자인의 핵심 개념과 실무 스킬을 익히고 싶은 디자인 입문자 또는 취업 준비생 분들께 추천드립니다. 실무에 바로 적용 가능한 Figma 사용법과 포트폴리오에 강력하게 어필할 수 있는 반응형 UI 제작 능력을 갖출 수 있습니다.


💻 현직 디자이너

그리드, 오토 레이아웃 등 반응형 핵심 기능을 익혀 실무 완성도를 높이고 싶은 디자이너 분들께 추천드립니다. 다양한 화면에 최적화된 UI 설계 역량을 갖출 수 있습니다.


🧩 기획자 / PM / PO

와이어프레임을 효율적으로 만들고, 디자이너와 원활하게 협업하고 싶은 기획자·PM·PO 분들께 적합합니다. Figma 레이아웃 기능을 이해하면 화면 설계와 커뮤니케이션 모두 수월해집니다.


🛠 개발자

프론트엔드 개발자라면 디자이너의 작업 방식을 이해하고, 협업 효율을 높일 수 있는 기회를 얻을 수 있습니다. 직접 디자인을 다루는 경우에도, 반응형 UI의 구조와 원리를 익혀 개발 전 단계의 설계까지 자신 있게 준비할 수 있습니다.

Frequently Asked Questions 📌

Q. Can non-majors also take this course?

A.Yes, this course is designed for beginners and non-majors. However, I recommend that you come with prerequisite knowledge including conceptual basics of UX design, foundational knowledge for UI design, and familiarity with Figma's basic functions. If you're just starting with UX/UI design, taking my courses on Inflearn first - UX Design Introduction for Beginners and UI Design Course Using Figma - will help you master responsive design several times faster through this course.


Q. How can I quickly master responsive design?

A. If you've learned the basic principles of responsive design and how to use Figma tools, I think the most important thing is to "directly" practice with numerous examples. In this course, we've prepared everything from fundamentals to various real-world cases, and we'll guide you so you can master them by following along. However, the most important thing is that you don't just watch the lectures, but "directly" follow along and practice.


Q. Is it possible to study on both Windows and Mac?

A.Yes, it's possible. This course is created based on the Figma tool. Since Figma is internet browser-based software, it can run on both Windows and Mac, and I will provide shortcuts for both Windows/Mac versions that I use in this course.


Q. Can I take the course with the free version of Figma?

A. Yes, the content taught in this course can be accessed with the free version of Figma as well.

Learning Materials

  • We provide organized Figma files so you can directly practice all the cases covered in the lectures.

Recommended for
these people

Who is this course right for?

  • UX/UI design beginners & job seekers wanting quicker employment

  • Developer who collaborates with UX/UI designers, or directly designs.

  • PM/PO/Service Planners looking to boost work productivity in proposal creation using Auto Layout/Grid, etc.

  • Junior or incumbent designers unfamiliar with responsive design or Auto Layout/Constraints usage

Need to know before starting?

  • Figma: Basic Knowledge and How to Use

  • Basic concepts of UX/UI design

Hello
This is

4,852

Learners

639

Reviews

298

Answers

4.8

Rating

7

Courses

현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.

뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.

브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.

개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.

 

집필 및 강의

• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고

• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행

• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사

• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오  제작 및 발행)

 

경험 및 경력

• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너

(전) 서울 Pantech 모바일 앱 UI기획자

• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행

• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design

• 한동대학교 학부 졸업 / 전공: 산업디자인

Curriculum

All

40 lectures ∙ (5hr 10min)

Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • stumire9262님의 프로필 이미지
    stumire9262

    Reviews 1

    Average Rating 5.0

    5

    30% enrolled

    Thank you for creating the necessary lectures.

    • uxeric
      Instructor

      Thank you for the feedback. I'm so happy that I was able to help you through the course. I'll be cheering for all your future plans to go well~!

  • juliepj673691님의 프로필 이미지
    juliepj673691

    Reviews 1

    Average Rating 5.0

    5

    30% enrolled

    Even though these are basics I already know, you explain the fundamentals thoroughly and easily as a reminder, making it easy to understand! You show real-world examples while explaining, and I think it's great that I can find similar cases on my own to compare and study!!!

    Limited time deal ends in 3 days

    $58.30

    24%

    $77.00

    uxeric's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!