초급자를 위해 준비한
[기획 · 전략 · PM, UX/UI] 강의입니다.

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

[공지] 프레이머가 5/24 [프레이머-사이트]로 개편하여, 강의의 일부 코드가 동작하지 않는 것을 확인했습니다. 번거로우시겠지만 강의를 들으시는 분들은 http://framer.com/projects/new를 통해 새 프로젝트를 생성해주시기 바랍니다.

🤔프로토타입을? 굳이?

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

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

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

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

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

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

이런 분들께 추천드립니다

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

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

ㄱㅈㅇ!

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

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

프레이머 웹 공식 소개 영상

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

강의 예제를 드립니다.

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

Figma : https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo
Framer : https://framer.com/projects/xFiRc8OAux01S6z56OMj-ephJU

이런 분들께 추천드려요!