우리 같이 입어요! 인프런 후드티 💛
Thumbnail
추석 앵콜 할인 20% 중(D-2)
크리에이티브 UX/UI
프레이머를 활용하여 쉽고 간단하게 프로토타입 제작하기
33명이 수강하고 있어요.

20%

15,840원

19,800원
지식공유자 : 토마스
총 16개 수업˙총 2시간 46분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 223 공유
초급자를 위해 준비한
[UX/UI, 디자인 도구] 강의입니다.

"슝-하는 느낌으로 다음 카드가 등장했으면 좋겠어요." "이 디자인은 개발이 불가능한가요?" 이런 말들이 익숙하신가요? 그렇다면 쉽고 간단한 프로토타입을 만들어보는 건 어떨까요? 프레이머를 이용해서요!

✍️
이런 걸
배워요!
개발 전 개발 가능여부를 간단한 프로토타입을 통해 확인할 수 있어요.
개발 전 기획 이슈를 사전에 파악할 수 있어요.
기획 후 실제와 흡사한 프로토타입으로 UT를 진행할 수 있어요.
기획 전 기획과 연계된 인터렉션 정책을 세워볼 수 있어요.

🤔 프로토타입을? 굳이?

기획 회의 참여부터 핸드오프, 디자인 에셋 관리까지.. 디자이너라면 디자인 외에도 신경 써야 할 것이 넘쳐난다는 점, 아마 모든 프로덕트 디자이너들이 공감하리라 생각합니다. "사용자 이슈를 파악하고 잘 빠진 디자인을 뽑는 것도 힘들어 죽겠는데, 프로토타입까지?"라고 생각하는 당신, 그 마음 십분 이해합니다……. 만, 이 강의를 보고 다시 생각해 보는 것은 어떨까요?

👨‍💻 : 이거.. 이렇게 만드는거 맞나요?

개발자 혼자 서비스를 만들지 않는 이상, 커뮤니케이션은 필수입니다. 서비스가 크면 클수록, 커뮤니케이션 비용도 늘어나죠. 대부분의 이슈는 슬랙 메시지로 처리가 가능할 거에요. 조금 복잡한 문제라면 줌 회의로 충분할 것입니다. 하지만, 제품을 완전히 피봇팅하는 경우라면, 아주 세심한 사항에 대한 수정이라면, 그리고 문제를 말로 설명하는 것 자체가 불가능하다면, 아마도 프로토타입을 만드는 것이 가장 빠른 문제 해결 방법일 수 있습니다.

❗️꼭, 프레이머를 써야만 하는 이유가 있나요?

챕터 3 : 코드 입혀보기 - 참고 사이트 영상 중

챕터 3 : 코드 입혀보기 - 참고 사이트 영상 중

프로토파이, 인비전, 오븐, 발사믹 등... 그 어느때보다 지금은 프로토타입 도구가 많은 시대입니다. 심지어 피그마, 스케치와 같은 디자인 도구가 프로토타입 기능을 경쟁적으로 추가하면서, 이제 간단한 사용자 플로우는 디자인 도구에서 구현이 가능하죠. 하지만 이런 도구는 GUI 기반의 도구로써, 최종 제품제작에 앞서 제품을 흉내 낸 '모형'입니다. 개발자는 완성된 화면과 디자이너의 설명을 들어가며 이 모형을 다시 '해석'하는 과정이 필요하겠죠. 하지만, 프레이머는 리액트 기반의 프로토타입 도구입니다. 프레이머를 통해 당신이 제작한 제품은 프로덕트 오너를 위한 하나의 '제품'입니다. 완성된 제품은 netlify같은 PaaS에서 배포가 가능하며, 심지어 개발자가 소스를 뜯어볼 수도 있어요. 이 말은, 언제 어디서나 실시간으로 수정되는 웹 제품을 당신이 만들 수 있다는 뜻입니다!

이런 분들께 추천드립니다

  • 내 디자인이 개발이 가능한 디자인인지 테스트해보고 싶은 사람
  • 실시간으로 프로토타입을 수정하며 피드백을 반영해보고 싶은 사람
  • 코드를 통해 디자인을 구현해보고 싶은 사람

프레이머로 어떤 것을 만드나요?

존버금

ㄱㅈㅇ!

프레이머는 리액트로 구현할 수 있는 화면은 무엇이든 만들 수 있습니다! (물론, 복잡할수록 더 어렵다는 것은... 😂 ) 이번 시간에는 최근 전 세계에서 많은 관심을 가지고 있는 '주식' 서비스를 만들어 볼 거에요. 개발자 관점에서 아이디어를 구상하고, 화면을 그려보고.... 아주 약간의 🤗  코딩을 해 보는 시간을 가져볼 예정입니다. 그리고 UT를 통해 제품을 실시간으로 개선하는 과정도 가져볼 거에요.

프레이머, 많이 어렵지는 않을까요...?

프레이머 웹 공식 소개 영상

프레이머는 코드-베이스 프로토타이핑 도구이지만, 코딩을 아예 몰라도 충분히 사용 가능한 도구에요! 이 강의에서는 난이도를 천천히 올려가며 도구를 이해하고, 익히는 과정을 가져볼 예정입니다. 시작이 반이라는 말이 있잖아요? 이 강의에서는 쉽고 간단하게 자신이 원하는 프로토타입을 만들 수 있게끔 만드는 것이 목표입니다. 흥미를 가지고 포기하지 않는다면 현업에서 충분히 활용 가능한 당신만의 스킬이 될 것입니다.

강의 예제를 드립니다.

이번 강의는 피그마와 프레이머 웹을 이용하여 제작하였습니다. 개인용 프레이머 웹은 무료입니다! 아래 예제를 미리 확인하고 강의를 보신다면, 한결 쉽게 보실 수 있을거에요. 😉

Figma : https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo
Framer : https://framer.com/projects/4AJ8UTJBYCajdrj78XiO-7XiRa

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
디자인의 문제점을 사전에 파악하고 싶은 분
개발을 고려한 디자인을 구현하고 싶은 분
"슝-하는 느낌으로 만들어주세요"를 구체적으로 표현하고 싶은 분
코드를 통해 디자인 인사이트를 얻고 싶은 분
📚
선수 지식,
필요한가요?
Figma / Sketch
html / css
React
Typescript

안녕하세요
토마스 입니다.
토마스의 썸네일

안녕하세요. 디자이너 토마스입니다. 현재 일본에서 일하고 있습니다.

커리큘럼 총 16 개 ˙ 2시간 46분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 코드 입혀보기
참고 사이트 미리보기 11:24 Override 미리보기 14:50
Override : 트리거 만들기 10:14
Override : 기능(function) 만들기 06:29
스마트 컴포넌트 x Override 26:08
Override로 Variant 바꾸기 14:15
섹션 3. 코드로 디자인하기
Code Component 미리보기 13:46
CreateStore 07:56
Code Component 응용하기 07:41
섹션 4. 피드백 받기
강의 게시일 : 2021년 05월 24일 (마지막 업데이트일 : 2021년 05월 24일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
추석 앵콜 할인 20% 중(D-2)

20%

15,840원

19,800원
폴더에 추가 223 공유
지식공유자 : 토마스
총 16개 수업˙총 2시간 46분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스