토이프로젝트 개편하기 ~1탄~

 

토이프로젝트 개편하기 ~0탄~

지난 글에서 이어집니다...

생각보다 빨리 찾아온 시행착오 😱

결론부터 말하자면, 약 반 정도 만들고 다시 만들기로 했다.
이 글은... 실패에 대한 회고록 이 될 것 같다.

그럼 왜 망했는지... 그동안 나는 무엇을 했는지 되돌아보도록 하자...

🔨 왜 망했지? 기획편

기획 메모..

• 작업 과정

  • 먼저 구현하려는 기능과, 필요한 데이터를 쭉 작성했다. 그리고 페이지를 나눠 UI를 그렸다.
  • 만들려고 하는 이미지의 종류를 늘리고, 각 이미지마다 들어가야 할 요소가 무엇인지 생각했다.

• 망한 원인

  • 기획을 대충 했다. 기획을 대충 하니 이후 디자인 작업과 코딩 작업이 이루어질 때 기획과 병행하는 일이 발생했다. 기획이 변경되면서 디자인, 코딩이 엎어지며 작업 시간은 점점 길어지고 말았다.
    • 빨리 작업을 시작하고 싶어서 대충 하게 된 부분도 있다...
  • 프로젝트의 핵심 기능과 부가 기능을 구분하지 않았다. 전체 프로젝트에서 내가 하고 싶은(재밌어하는) 부분만 열심히 기획해놓았을 뿐이었다.
    • 완벽한 프로젝트는 없다. 핵심 기능 외에 있으면 좋을 자잘한 기능들을 추가하다 보면 끝도 없다는 뜻이다.
    • 개편 전 프로젝트의 경우에는 기능 한 가지씩 만들어서 배포했는데, 이걸 한꺼번에 좋게 만들려고 하니 일어나 현상인 것 같다.

🔨 왜 망했... 디자인 편

• 작업 과정

  • 거의 레이아웃만 만들었기에 디자인이라고 하기 민망하지만.. 피그마에서 작업했다.
  • 사실 디자인 과정에서는 크게 잘못 이행한 부분은 없다고 생각한다. (코딩하면서 디자인을 수정하긴 했지만...)

figma 화면

 

 

🔨 왜 망했지? 코딩 편

• 작업 과정

  1. gulp로 빌드 자동화 세팅을 했다.

     • 간략한 패키지 소개
       • gulp-html-tag-include : header나 footer 등, 여러 군데 반복적으로 들어가는 태그를 일괄 적용
       • gulp-image : 빠른 동작을 위해 이미지 용량 줄이기
       • gulp-sass : sass 사용
       • gulp-gh-pages : 깃 헙 페이지에서 배포
       • babelify : 자바스크립트 최신 문법을 사용하기 위해
       • 이외에도 많이 있다...

  2. 자바스크립트 파일의 기능별로 파일을 쪼개고 모듈화 해가며 작업했다.

나름대로 기능별로 쪼객 js파일

 

• 망한 원인

  • React로 했어야 했다.

  • 내가 만들려던 프로젝트는 이미지 검색을 하고, 입력한 데이터 값마다 주기적으로 페이지를 변경하며, 페이지 간 공유되는 데이터가 있다.

    • 서버사이드 렌더링을 사용하지만, 페이지 간 공유되는 정보는 로컬 스토리지로 어떻게든 해결할 수 있을 것 같았다.

    • 입력한 데이터 값마다 주기적으로 페이지를 변경되는 기능을 구현하기 위해 DOM과 함수를 연결시키다 보니 코드는 점점 꼬여갔다. 그리고 이걸 리액트의 State로 관리했다면 훨씬 편하게 했을 것이라는 생각이 머릿속에 떠나지 않았다.

    • 코딩해가며 점점 복잡함과 어려움이 쌓여갔고 이것들은 React를 사용하여 SPA로 만들었을 때, 모두 해결할 수 있다는 결론에 도달한 시점에서.... 이 작업을 잠시 접어두기로 했다.

과거의 내 생각은 틀렸다...

이때 처음부터 했어야 했다...

 

 

✨ 그래서 어떻게 고칠 것인가

실은 망한 것 까진 아니다. (아마도) 다만 도구를 바꿨을 때 작업 효율과 결과물이 나아질 것이다. 자신이 하려는 작업에 최적화된 도구를 고르는 것도 중요한 것 같다...

바로 React로 작업하지 않았던 이유(사용 미숙)를 해결하기 위해 리액트로 간단한 프로젝트를 만들어보는 중이다.

• 그래서 연습 삼아 만든 것
  • 마법의 수정구슬
  • 유튜브 클론 (이라지만 리디자인 한... / 미배포)
  • 친구 조각모음

---

📝 도움이 된 자료

갑자기 분위기 영업

• 기획 참고 서적 : http://aladin.kr/p/SNeUD

  회사에 다니면서 프로젝트를 기획할 때 이 책의 저자인 도그냥님의 브런치에서 많은 힌트를 얻었다. 꼭 서비스 기획자가 아니더라도 서비스를 만들어보고 싶은 사람이라면 도움이 될만한 책이다. 사실 내가 이번 프로젝트에서 번한 실수를 방지하는 방법도 이 책에 소개되어 있다.

• 디자인 툴(피그마) 강의 : https://youtu.be/_myVwi0vq5s

  개인적으로 XD보다 사용하기 좋다고 느꼈다. 피그마에 대한 강의는 많지만 짧은 시간 동안 필수적으로 사용할만한 기능을 설명한 강의라고 생각한다. 빠르게 피그마를 경험해보고 싶다면 추천!

• gulp 강의 : https://nomadcoders.co/gulp-for-beginners

  gulp는 빌드 자동화 툴이다. 새로 할 작업은 create-react-app을 사용할 것이므로 gulp가 필요 없지만 다른 프로젝트 할 때는 유용하게 사용할 수 있을 것 같다.

현업 기획자 도그냥이 알려주는 서비스 기획 스쿨

Gulp 90분 마스터하기 - 노마드 코더 Nomad Coders