안녕하세요. 마이크로프로텍트에서 프로 짤방 리뷰어를 맡고 있는 노아입니다.

마이크로프로텍트의 시작을 알렸던 마이크로프로텍트 웹사이트를 빠르게 개발한 경험을 공유하고자 합니다.

speed

마이크로프로텍트 웹 사이트는 2019년 12월에 첫 오픈하여 4개월 동안 다섯 번의 리뉴얼을 진행하였습니다.

2019년 12월에 공개한 웹 사이트 버전 #1 2020년 1월에 공개한 웹 사이트 버전 #2 2020년 1월에 공개한 웹 사이트 버전 #3 2020년 1월에 공개한 웹 사이트 버전 #4 2020년 1월에 공개한 웹 사이트 버전 #5
  • 2019년 12월 6일 웹 사이트 첫 공개
  • 2020년 1월 3일 웹 사이트 버전 2 공개
  • 2020년 1월 23일 웹 사이트 버전 3 공개
  • 2020년 1월 31일 웹 사이트 버전 4 공개
  • 2020년 3월 6일 웹 사이트 버전 5 공개
  • 웹 사이트 버전 6 진행 예정…

각 버전은 하나하나가 거의 새로운 프로젝트를 진행하는 수준으로 매번 새로운 내용과 새로운 디자인으로 개발되었습니다.

모든 버전은 하나의 프로젝트로 관리되었고, 비즈니스의 요구사항에 따라 많게는 한 달 안에 세 번까지도 리뉴얼했을 정도로 개발이 빠르게 진행되었습니다.

이렇게 빠른 개발이 가능했던 배경에는 마이크로프로텍트만의 개발 방식이 있었습니다.

secret

작고 빠르게 시작하기

저희 웹 사이트는 고객들에게 지속적이고 빠르게 마이크로프로텍트의 가치를 보여주고 피드백을 받아 서비스의 방향을 잡아가는 것이 목표였습니다.

이러한 목표를 달성하기 위해 작게라도 완성된 서비스를 보여주는 방향으로 개발을 진행하였습니다. 작고 빠르게 개발할수록 프로젝트를 변경해야 하거나 때로는 갈아엎어야(?) 할 때 유연하게 대처할 수 있기 때문입니다.

agile

프로젝트 자체도 빠르게 시작하기 위해 처음에 index.html 파일 하나에서 시작하였습니다.

호스팅조차도 GitHub Pages를 사용하였습니다.

그리하여 개발에 대한 고민을 최대한 적게 하고 마이크로프로텍트의 비즈니스 가치를 어떻게 보여줄지에 대해 더 집중할 수 있도록 하였습니다.

여기에 디자인을 입히기 위한 CSS 파일과 다국어를 지원하기 위한 자바스크립트 파일을 각각 한 개씩만 추가하여 기획부터 디자인 과정까지 모두 합쳐 일주일 만에 첫 웹사이트를 오픈하였습니다.

심지어 GitHub에 저장소도 공개로 하였기 때문에 별도의 비용을 들이지 않고도 사이트를 오픈할 수 있었습니다.

money

필요할 때 도입하기

보통은 웹 사이트를 만든다고 하면 처음부터 어떤 프레임워크를 사용할지, 프로젝트 구조는 어떻게 구성할지 기타 등등 많은 고민과 결정을 합니다. 그리고 사용할 개발 기술들도 대부분 미리 결정하고 세팅한 후 프로젝트를 시작하는 경우가 많습니다.

하지만 개발을 시작할 때 이런 것들이 지금 당장 필요할까? 라는 생각을 해보면 배보다 배꼽이 더 큰 상황이 많습니다.

어차피 나중에 사용할 건데…

하는 김에 구조만 조금 잡을까…

개발자라면 뿌리치기 힘든 유혹들입니다. 이렇게 이것저것 세팅하고 준비하다 보면 생각보다 시간도 많이 소요되고, 닭 잡는데 소 칼을 쓰는 경우가 발생합니다.

때로는 계획이 변경되어 미리 결정한 기술이 아예 필요 없는 경우도 있습니다.

money

사소한 부분이지만 필요할 때 필요한 만큼만 기술을 도입하는 게 빠르게 개발하기 위해 굉장히 중요합니다.

저희도 처음부터 어느 정도 React를 염두에 두고는 있었지만 정말 필요한 이유가 생겼을 때 프로젝트에 도입하기로 하였습니다. 그러다 보니 첫 웹사이트를 공개한 후에야 프로젝트에 React가 도입되었습니다.

React는 사이트가 하나의 프로젝트에서 버전 별로 관리되어야 하고, 계속해서 웹 사이트의 부분 부분들을 유연하게 교체하기 위해서 웹 사이트의 요소들이 컴포넌트 단위로 관리되어야 할 때나 필요했기 때문입니다.

기술 도입뿐만 아니라 디렉터리 정리 및 코드 리팩터링 같은 부분들도 필요할 때 진행합니다.

외부 자원 적극적으로 활용하기

개발을 하다 보면 개발자는 특정 기능이 필요할 때마다

내가 한 번 만들어 볼까…

에잇, 그냥 내가 만들지 뭐…

라는 유혹에 빠지기가 쉽습니다.

doit

정말 중요하고, 지속적으로 사용될 기능이나 서비스라면 모를까 그런 확신이 들지 않는다면 외부의 자원을 적극적으로 활용하는 것도 빠르게 개발하는 방법입니다.

저희는 외부 서비스를 적극적으로 활용해 서버가 필요한 상황이 있을 때마다 대처하였습니다.

예를 들어 첫 웹 사이트의 핵심 기능은 고객들의 반응을 알기 위해 이메일 구독을 받는 것이었습니다. 이메일 구독을 받기 위해서는 메일 서버 및 이메일 주소 수집을 위한 서버가 필요하였습니다. 하지만 Mailchimp라는 서비스를 이용해 간단하게 자바스크립트 코드를 삽입하는 것만으로 기능 개발을 끝냈습니다.

재미있는 사실은 버전 2부터는 이메일 구독 기능이 핵심이 아니게 된 것입니다.

만약 처음부터 이메일 구독 서비스를 위해 직접 개발하였다면 빠르게 개발하는 것은 불가능하였을 것이고, 시간과 에너지의 낭비였을 것입니다.

이외에도 다국어 지원을 위한 데이터 관리를 구글 스프레드시트를 이용해 지금까지도 별도의 서버 없이 원활하게 서비스를 제공하고 있습니다.

회고하며

빠르게 개발하기 위한 방식들을 적용하면서 내가 도입하려고 하는 것이 정말 당장 필요한가라는 고민을 하고, 오버스펙 하여 개발하는 경우가 줄어들어 좋았습니다.

정말 왜 필요한지 필요성을 느끼고 개발을 하다 보니 기술에 대해 이해도도 기존 보다 더 깊어지는 것 같습니다.

앞으로도 빠르게 개발해 나가는 방식을 잘 유지해 나가다 보면 우리가 추구하는 서비스를 더 빠르게 완성해 나갈 수 있을 거라 믿습니다 :)