로드맵 썸네일

함께 프로덕트 디자인 공부 하실분~

작성자 프로필 이미지

엠제이

HTML/CSS
JavaScript
Figma

입문 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

9명 참여중

로드맵 코스

프로덕트 디자인을 더 잘하기 위한 기술 🔎

도메인 지식:

  • 프로덕트 디자인은 해당 분야의 도메인 지식을 이해하는 것이 중요합니다. 예를 들어, 사용자 경험 (UX), 사용자 인터페이스 (UI), 인공지능 (AI), 웹 및 앱 디자인 등에 대한 기본 지식이 필요합니다.

  • 해당 도메인의 모든 서비스에 포함되는 필수적인 기능을 파악합니다.

  • 서비스 기능을 이해하고 사용자가 어떤 요구를 가지고 있는지 이해하는 것이 중요합니다.


시각적 디자인 기술:

  • 스케치, 그림, 프로토타입 제작 등을 통해 아이디어를 시각적으로 표현합니다.

  • 색상, 타이포그래피, 아이콘 등을 활용하여 레이아웃을 디자인하고 사용자의 행동을 유도하는 방법을 익힙니다. ( 게슈탈트 이론 )

협업 능력:

  • 프로덕트 디자인은 개발자, 기획자, 마케터와 협업 합니다. 효과적인 커뮤니케이션과 협업을 필요합니다.

  • 개발지식을 가지고 있다면 디자인을 개발자에게 더 효율적으로 전달할 수 있습니다.

  • 기술적인 제약 사항을 이해하고 디자인을 구현할 때 발생할 문제를 미리 예측하거나 더 쉽고 효과적으로 문제를 해결할 수 있는 방법들로 고려해 볼 수 있습니다.

  • 프로덕트 디자이너로서 경쟁력을 가질 수 있습니다.

사용자 중심 접근법:

  • 사용자의 Bedrock Needs를 이해하고, 사용자 리서치, 페르소나 작성, 사용자 플로우 설계 등을 통해 사용자 중심 접근법을 익힙니다. Bedrock Needs란 고객이 제품이나 서비스를 이용하면서 가장 필요로 하는 핵심적인 요구사항을 의미합니다.

기술 도구 및 소프트웨어:

  • 디자인 툴 (예: Sketch, Figma, Adobe XD)을 사용하는 방법을 익히고, 프로토타이핑 도구를 활용합니다.


문제 해결 능력:

  • 사용자의 문제를 해결하기 위해 디자인적인 접근법을 찾는 능력이 필요합니다.

  • 가설에 더할 근거를 데이터로 기반하여 개선안을 제시하고 설득하는 능력.



디자이너가 웹 개발 기술을 습득하여 개발자와의 협업을 원활하게 하기 위해서는 기본적인 웹 개발 이해부터, 특정 기술 스택에 대한 지식, 그리고 협업 도구의 사용법

HTML/CSS:

  • 웹 페이지의 구조와 스타일을 정의하는 가장 기본적인 기술입니다. 디자이너가 이를 이해하면, 자신의 디자인이 실제로 어떻게 구현될지 더 잘 이해하고, 개발자와 효과적으로 의사소통할 수 있습니다.


자바스크립트 (JavaScript):

  • 웹 페이지에 동적 요소를 추가하는 스크립팅 언어입니다. 기본적인 자바스크립트 이해는 사용자 인터페이스(UI) 디자인을 더 실용적으로 만들 수 있게 도와주며, 디자이너와 개발자 간의 대화에 깊이를 더합니다.


반응형 웹 디자인:

  • 다양한 장치와 화면 크기에 맞춰 콘텐츠가 유연하게 표시되도록 하는 디자인 접근 방식입니다. 이를 통해 사용자 경험(UX)을 향상시킬 수 있습니다.

프론트엔드 프레임워크:

  • React, Vue.js, Angular 등의 프론트엔드 프레임워크에 대한 기본적인 이해는 디자이너가 웹 개발 흐름을 이해하는 데 도움이 됩니다.

웹 접근성:

  • 모든 사용자, 특히 장애를 가진 사용자들이 웹 사이트를 이용할 수 있도록 보장하는 원칙과 기술입니다. 디자이너가 이를 이해하면 더 포괄적인 디자인을 만들 수 있습니다.

사용자 경험(UX)과 사용자 인터페이스(UI) 개발의 원칙:

  • 디자인과 개발 사이의 간극을 좁히기 위해, 디자이너는 UX/UI 개발의 기술적 측면을 이해할 필요가 있습니다.


이런 분들이 들으면 좋아요 🙋‍♂

스타트업 프로덕트 디자이너로
입문하고 싶은 분

문제해결능력을 키우고
성장하고 싶은 분

실무에서 원활한 협업을
하고 싶은 분

이 로드맵에서 배우는 내용 😊

  1. 프로덕트 디자인 입문

  2. 문제해결능력

  3. 피그마 활용하기

  4. 스타트업에서 디자이너로 성장하기

  5. 협업을 위한 개발에 대한 이해

로드맵 상세보기

9개 코스

로드맵에 포함된 강의 썸네일
인프런
요즘 뜨는 프로덕트 디자이너 실무 가이드
프로덕트 디자이너의 실무 프로세스에 대해 하나씩 차근차근 알려드릴게요. 
기초적인 디자인 관련 단어부터 페르소나, QA, 디자인 시스템 등 전체적인 디자인 실무에 대해 완벽하게 이해할 수 있을 거예요!

56,920

75,900

로드맵에 포함된 강의 썸네일
일을 더 잘하고 싶은 디자이너, 서비스 기획자, PM이라면 필수 강의! 디지털 프로덕트, 산업, 유저의 져니별로 어떤 것을 알아야하는지 실제 사례를 기반으로 알려드려요.

115,500

154,000

로드맵에 포함된 강의 썸네일
Figma라는 새로운 디자인 툴에 대해 아직 고민하고 계신가요? 쉽고 빠르게 하나씩 따라 하다 보면 어느새 나도 피그마 전문가!

33,000

44,000

로드맵에 포함된 강의 썸네일
인프런과 볼드UX가 함께한 이 강의는 최신 피그마 활용 꿀팁과 다양한 볼드UX만의 인사이트와 업무 노하우를 배울 수 있어요. 

프로덕트 디자인 분야에서 9년의 실무 경험을 쌓은 볼드의 전문 지식과 함께, 피그마를 효과적으로 활용하는 방법에 대한 소중한 정보를 얻을 수 있는 기회입니다.

무료

로드맵에 포함된 강의 썸네일
혼자라 너무 바쁘지만 항상 제대로 일하지 못하고 있다는 불안감이 있다면? 4곳의 스타트업을 거쳐 네카라(...)센에서 일하고 있는 9년차 디자이너가 부딪히며 경험한 사수 없이 성장하는 실전 전략을 알려드려요.

37,120

49,500

로드맵에 포함된 강의 썸네일
코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

16,500

22,000

로드맵에 포함된 강의 썸네일
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다.

무료

로드맵 코스 9