프론트엔드 토이프로젝트

프론트엔드 토이프로젝트 가이드(feat. 우아한 형제들 현직 개발자)

신입/주니어 프론트엔드 개발자라면 한번쯤 ‘토이프로젝트’에 대한 고민을 해보신 적이 있을겁니다.

'토이프로젝트 어떤 주제로 해야하지?'
'토이프로젝트 기발한 아이디어 없을까?'
'토이프로젝트 어디서부터 어떻게 접근해야 할까?'

그래서 오늘은 프론트엔드 토이프로젝트에 대해 자세히 알아보려고 합니다.

토이프로젝트 가이드

Written by. 송요창 (현 우아한형제들 프론트엔드 개발자)

먼저 '토이프로젝트'란 무엇일까요?

토이프로젝트란 개인 혹은 소규모 그룹이 남는 시간을 쪼개서 단기 프로젝트를 개발하는 것을 말해요. 주로 상업적인 목적보다는 개인적인 깨달음이나 능력 향상, 새로운 아이디어나 기술 개발 등을 위해 시작되는 것이 일반적이죠. 보통 토이프로젝트는 제한된 예산과 시간 내에서 구현될 수 있는 것들로 구성되며, 짧으면 1개월에서 길면 3개월 이내에 완성을 목표로 하는 비교적 간단한 프로젝트라고 할 수 있어요.

그렇다면 '토이프로젝트'를 하는 이유는 무엇일까요?

토이 프로젝트를 하는 이유는 다양해요. 취미나 재미로 토이프로젝트를 진행할 수도 있고, 프로그래밍, 디자인, 엔지니어링 등과 같은 분야에서 스킬을 향상시키기 위해 진행할 수도 있습니다. 또 토이프로젝트를 하면서 새로운 아이디어를 얻거나 새로운 방법으로 문제를 해결할 수 있는 기회들을 얻기도 하죠. 신입/주니어 개발자의 경우 주로 토이프로젝트를 통해 구현한 작업물을 포트폴리오에 추가하기 위해 진행하는 경우가 많아요. 토이프로젝트도 취업을 위한 하나의 경험이 되기 때문이죠.

그럼 그동안 여러분이 고민하셨던 토이프로젝트를 어떻게 진행하면 좋을 지에 현직자의 이야기를 들어보려고 합니다. ‘토이프로젝트 진행 가이드’를 잘 설명한, 우아한 형제들 현직 프론트엔드 개발자 송요창님의 글을 소개할게요 :)

#1 들어가며

개발자 퍼스널 브랜딩 워크숍 특강에서 토이 프로젝트에 관한 이야기를 짧게 나눴다. 그리고 그 뒤에 어떻게 토이 프로젝트를 시작하고, 함께할 사람들 찾을 수 있는지 질문을 받았다. 간단히 어떻게 할지 적어서 전달한 뒤에 이와 비슷한 고민을 누군가는 하겠다 싶어서 몇자 남긴다.

- 여기서 토이 프로젝트는 프로그래밍해서 만들어내는 제품으로 한정한다.

#2 토이프로젝트 가이드

1단계) 주제 찾기

제품을 만들 때 가장 중요한건 무엇을 만들지 정하는 일이라고 생각한다. 이게 없으면 시작조차 하지 못한다. 그럼 어디서 주제를 발견할까?

자신 주변에서 주제 찾기
자신 주변에서 찾아보는 게 제일 좋다. 스스로 불편해하는 일을 해결할만한 제품을 만들어도 좋다. 이렇게만 말하면 이해하기 힘들테니 몇가지 예를 들어보겠다.

여러가지 소셜 미디어를 사용하지만 그 중에서 트위터에는 익명으로 질문을 받고 답변하는 일을 종종봤다. 가장 많이 본 제품은 peing 인데 트위터에 첨부했을 때 나오는 이미지 안에 글자가 작아서 휴대전화로 볼때 불편했다. 그리고 글자가 살짝 뿌옇게 느껴지는 점도 맘에 들지 않았다.

그래서 blahx2라는 제품을 만들었다. 작동하는 첫 제품을 만들어내는데 2일 정도 걸렸고, 첨부하는 이미지가 선명하게 나오는 걸 주로 신경썼다.

blahX2 이미지

blahX2 트위터에 반영하기

blahx2처럼 나에게 필요한 제품을 만들었더니 계속 써보면서 부족한 부분을 찾아 고칠 수 있었다.

자신 주변에서 주제를 찾으면 이런 점이 편하다. 거창한 서비스를 만들어도 아무도 사용하지 않으면 피드백이 없어서 어디를 어떻게 고쳐야할지 감이 잡히지 않는다. 한명의 사용자라도 반드시 확보할 수 있다면 최소 한 번의 피드백은 확보할 수 있으니 좋다. 주변을 잘 살펴보자.

주변에서 찾아볼 법한 주제 예시

충분한 아저씨라서 상상력이 고루한 점 양해바랍니다.

- 질문하고, 의견을 받고 투표를 받는 일을 몇 개의 구글 폼으로 나눠서 발송해서 처리하고 있다?
- 회사 안에서 커피를 마시는데 바리스타님이 큰 소리로 번호를 부르고 있다?
- 퇴사자에게 롤링 페이퍼를 만들어서 선물하고 싶은데 재택이라 만날 수가 없다?
- 운동할 때 자주 쓰는 1RM 계산기가 모바일 최적화가 안되어있다?

이미있는 제품 따라해보기

아무리 주의를 살펴봐도 주제를 선정하지 못했다면 이미있는 제품을 따라해도 좋다. 앞서 만든 blahx2도 peing을 엄청 카피한 제품이다. peing 켜서 이거해보고 저거해보면서 화면 구성부터 사용하는 방법 등 많이 따라했다. 만드는 과정에서 조금씩 변경되긴 했지만 처음 제품을 구체화할 때 큰 도움을 받았다.

사용하는 프로그램 중에서 따라해보고 싶은게 있다면 그 중에서 일부만 따라해봐도 좋다. 그러면 화면 구성이나 사용 방법에 관한 고민이 적어져서 초기에 제품을 만드는 시간을 많이 쓸 수 있다.

예를 들어 google form을 자주 사용하고 있는데 중간 중간 원하는 이미지를 끼워넣고 싶어졌다. 혹은 google form 특유의 모습이 싫다고 해보자. 그럼 google form 기능을 조목 조목 따져보고, 자신이 주로 어떤걸 쓰는지 확인한다. 객관식 문항과 주관식 문항을 주로 쓰고 있다면 이 2가지 기능만 배치할 수 있도록 만들고 중간 중간 이미지도 선택해서 넣을 수 있는 서비스를 만들어보는 거다.

다른 예로 인스타그램 피드에는 링크를 넣어도 동작하지 않는다. 그래서 많은 분들이 프로필에 링크를 넣고 클릭하도록 유도한다. 내 경우는 쿠폰코드를 종종 넣어두는데 클릭해서 복사만이라도 잘 되면 좋겠는데 이게 잘 안되서 답답했다. 그래서 이 제품도 나 편하려고 만들 생각 했었다.

2단계) 기능 명세 만들기

주제를 선정했으면 이제 기능 명세를 만들어야한다. 이때 주요하게 고려해야하는 건 시간 자원이다. 예를들어 투두 리스트를 만든다고 해보자. 그럼 할 일을 입력하는 부분을 만들고, 할 일 목록이 출력되도록 해야한다.

자신이 동원할 수 있는 시간이 충분하다면 투두리스트의 정보를 데이터베이스에 넣고 로그인을 붙여서 어디서든 같은 목록을 조회할 수 있도록 해봐도 좋고, 테마별로 투두리스트를 따로 만들 수 있도록 해도 좋다. 그런데 투자할 수 있는 시간이 적다면 기능을 축소해야된다.

이건 처음부터 정할 필요는 없지만 처음에 많이 줄여두면 좋긴하다. 나중에는 욕심이 생겨서 뭔가 더 넣으려고 하기 때문에 어차피 기능이 커진다. 그러니 처음부터 많이 조금만 넣으려고해야 나중에도 적당한 수준의 기능만 가진다.

내 경우는 마음먹었을 때 1주일 안에 만들 수 있는 분량으로만 기능을 선정한다. 흥미가 급격히 떨어지는 사람이다. 그래서 초기에 결과물을 손에 넣은 뒤 어딘가 홍보할 수 없으면 GitHub에 죽은 레포지토리 하나 늘리고 말았다. 빨리 만들고 공개할 수 있게 기능을 줄인 뒤 빠르게 초기 제품을 출시하려고 노력하고 있다. 이 글을 읽는 여러분도 자신의 성향을 고려해서 적절한 전략을 짜면 되겠다.

3단계) 빠르게 초기 제품 만들기

제품을 만들 초기 동력은 순전히 나의 에너지다. 그런데 그 에너지는 시간이 지나면 줄어든다. 에너지가 남아있을 때 제품이 나오는게 좋다.

그러면 앞서 필요하다고 생각한 기능 중에서도 과감하게 제거해도 좋다. 로그인 기능이 없어도 좋다. 화면이 예쁘지 않아도 된다. 제품으로 확인하려고하는건 OAuth, JWT 구현 경험이 아니다. 내 산출물이 Product Hunt에서 1위할 가능성은 거의 0에 수렴하니까 유려할 필요도 없다.

4단계) 제품 출시 후 피드백 받기

자 이제 초기 제품이 나왔다. 그러면 지인들에게 제품을 전달하고 제품에 관한 피드백을 받자. 어떤 의견이라도 좋으니 솔직하게 얘기해달라고 부탁하자.

자신이 만든 제품이라서 내게는 사용법이 익숙해서 사용하며 실수할 일이 거의 없다. 그런데 지인은 완전히 다른 존재다. 버튼만 보이면 마구 연타하는 사람도 있고, 별로 신경쓰지 않아도될 부분에서 한참을 고민하기도 한다. 혹은 내가 전혀 신경쓰지 않은 기능만 계속 찾는 사람도 있다.

받은 피드백을 취합해서 먼저 수정할 부분을 확인해보자. 이때 무엇을 수정할지는 본인 의사에 달렸다. 많은 사람이 지적한다고 반드시 수정할 필요도 없고, 한 사람만 지적한다고 무시할 필요도 없다. 본인이 중요하다고 생각하는 부분을 고치면 되니 우선 순위를 잘 설정한다.

5단계) 수정 후 4번으로

피드백 받은 부분을 수정한 뒤 다시 피드백을 수집한다. 그리고 수정하기를 반복한다. 이 과정은 그다지 즐겁지도 않고 보람도 별로 없지만 단단한 제품이 되려면 꼭 필요하다. 그러니 인내심을 가지고 몇 사이클 돌려보자.

#3 토이프로젝트를 함께할 동료 찾기

나는 보통 토이 프로젝트는 혼자하는 편이다. 여러 사람이 함께하면 의견 조율에 시간도 많이 든다. 아무리 단순한 제품이라도 서로 생각바가 다르다. 그럼에도 불구하고 사람이 필요하다면 몇가지 선택지가 있다.

우선 공개된 곳에서 구인 해보자.

- 인프런
- 커리어리

인프런이나 커리어리에 들어가보면 스터디나 토이 프로젝트할 사람을 찾는 사람들이 있다. 이런 곳에 글을 올리고 함께할 사람을 찾아도 좋다.

만약 초기 제품을 만든 상태라면 주변에 알리고 함께할 사람을 찾아도 좋다. 재미있어보이는 프로젝트라면 벌 나비는 알아서 날아오기도 한다. 하고 싶은데 해도 될까 싶어서 말을 안거는 사람도 많으니 사람이 필요하다고 말해보자.

우아한형제들 송요창 개발자님의 ‘토이프로젝트 가이드’가 많은 도움이 되셨나요? 송요창 개발자님의 말처럼 토이프로젝트 주제를 정하는 것에 대해 너무 어렵게 생각하지 마시고, 주변의 불편한 점을 바꿔보겠다는 것에서 출발보신다면 분명히 멋진 프로젝트를 만들어내실 수 있을 것이라고 생각합니다!

우아한형제들 송요창 개발자 님이 프론트엔드 개발을 시작한 비전공자분들께 하고 싶은 이야기가 궁금하다면 아래 영상도 함께 참고해주세요~!

마지막으로 참고할만한 토이프로젝트 모음 사이트와 아이디어를 모아둔 콘텐츠를 소개하며 마무리하겠습니다 :) 프론트엔드 개발자로 취업하는 그 날까지 모든 개발자 취준생 여러분을 제로베이스 프론트엔드 스쿨이 응원하겠습니다!

토이프로젝트 모음(링크)

- 토이프로젝트 모음 사이트 데브폴리오
- 여기어때 컴퍼니 프론트엔드 개발자 이은지님의 velog

토이프로젝트 아이디어 모음(링크)

- 웹사이트 제작 시 참고하면 좋은 웹사이트 아이디어 50가지-WiX Blog
- 2023년 스타트업을 위한 50가지 최고의 앱 아이디어-AppMaster

개발자 취업은 제로베이스

추천 컨텐츠