[프로젝트] 클론 코딩으로 프로젝트 시작하기
개인 프로젝트를 해야겠다는 생각은 사실 오래 전부터 있었으나.... 회사를 다녀면서 프로젝트를 한다는 건 말처럼 쉬운 일이 아니었다... ㅎㅎ
하지만 갈수록 사용하는 기술만 사용하다보니 조금 단조롭기도 하고 리액트를 공부해보고자 하는 마음도 있어, 프로젝트 인원을 구인하는 사이트를 돌아보았다.
결과는.. 음... 이 사이트만 봐도 개발자 시장의 수요와 공급을 잘 알 수 있었다. 압도적으로 많은 백엔드 개발자와 프론트엔드 구인글만 남은 상태였다.
애초에 긴 시간을 프로젝트에 투자할 수 있는 상황이 아니라 팀을 이뤄 하기에는 어려움이 있다고 생각했고...
혼자서 아이디어부터 짜내려다가 몇 가지 스케치만 해놓고 3개월이 지났다...
이러면 백날 천날이 지나도 시작을 못 할 것 같아 조금 더 접근성이 쉬운 방법을 선택했는데.
바로 클론 코딩이다.
클론 코딩(Clone Coding)이란 이미 출시된 도메인, 서비스 등을 따라하며 학습하는 방식으로 알려져 있다. 보통은 클론 코딩이라는 강의 과정을 수강하며 그저 따라하기만 하여 실제 학습에는 도움이 안 된다는 인식도 있지만….
개인적으로 전혀 모르는 기술을 사용할 때, UI/UX, 레이아웃, 디자인, 브랜드 도메인 분석, 전반적인 프로젝트 개발 능력을 향상시키기엔 괜찮은 방법이다.
성향 차이는 있겠지만 기술은 이론만 익혀서는 사용하기가 힘들기 때문에. 결과물을 비교적 빨리 확인할 수 있으며, 방향성이 잡혀있어서 자칫 흐지부지 되기 쉬운 프로젝트를 완수하는 데 도움이 된다.
그럼 클론 코딩할 사이트 정해보려고 한다.
1. UI/UX로 선택하기
첫 번째 방법은 UI/UX 우수 사례 중에서 정하는 것이다.
위 사이트는 웹보다는 앱이 더 많기는 하지만 UI/UX 레퍼런스를 모아서 볼 수 있어서 좋다.
타 사이트의 디자인, 레이아웃을 참고하여 자신이 구현하고 싶은 대략적인 청사진을 결정할 수 있다는 게 장점이다.
2. 기술 스택으로 선택하기
두 번째 방법은 해당 사이트가 어떤 기술 스택을 사용하는지 찾아보고 내가 원하는 스택과 일정부분 일치하는 사이트를 선택하는 것이다.
이 사이트를 참고하면 대략적으로 어떤 기업이 어떤 기술을 사용하는지 알 수 있다.
기업별 스택, 스택을 사용하는 기업별로 필터링 하여 검색해볼 수 있으니 참고하면 좋다.
3. 도메인으로 선택하기
세 번째 방법은 내가 원하는 ‘도메인’에서 이미 잘 알려진 서비스를 선택하는 것이다.
보통 네트워크에서 생각하는 도메인이 아니라. 소프트웨어 공학에서 사용하는 도메인이란 용어는 조금 다른 뜻을 가진다.
워낙 범위가 넓게 사용되는 단어라 정확하게 용어를 정의하기는 어렵지만, 검색해보면 ‘해결하고자 하는 문제 영역’을 의미한다. 어려운 의미가 아니라 가장 크게 보면 여행, 의류, 뷰티처럼 대표적인 키워드로 생각하면 된다.
(더 자세한 도메인에 관한 얘기는 아래 링크로. https://javacan.tistory.com/entry/what-is-a-domain-model)
이번에는 ‘여행’과 관련된 서비스를 다뤄보고 싶었기 때문에 여러 여행 플랫폼 사이트를 몇 가지 찾아 보았다.
- 에어비앤비
에어비앤비는 UI/UX 사례에서도 많이 보이며, 메인에 중점을 두어 타 숙소 예약 사이트와 비교적 다른 레이아웃을 보여준다. - 여기어때
숙박 날짜, 여행 지역 등 메인 화면에서 바로 조회할 수 있는 전형적인 호텔 예약 사이트의 레이아웃이다. 해외 예약 사이트나 대부분 사람들이 생각하는 디자인 역시 여기어때와 비슷하지 않을까. 사실 해외 OTA의 요상한 미적감각이 늘 불편했던 한국인으로서 여기어때는 익숙한 UI/UX를 가져오면서도 디자인적으로도 나쁘지 않아서 좋았다. - 야놀자
야놀자는 현재 모바일과 웹이 동일한 디자인으로 제공되는 모바일 웹 형태로 보인다. 최근 모바일의 사용량이 증가하면서 모바일 앱과 웹 사이트의 레이아웃이 똑같은 사이트가 늘어나는 추세가 아닌가 싶다.
전체적으로 고려해봤을 때
이번 클론 코딩에서는 ‘에어비앤비’를 선택했는데 이유는 아래와 같다.
- 혼자서 구현하기에 너무 많지 않은 기능
- 연관 검색어, 필터링 등 이미 분석되어 참고할 레퍼런스가 많다는 점
- 자바, 리액트, AWS 등 서비스에 사용하는 스택이 내가 원하는 스택과 비슷함
- 구현해보고 싶은 ‘개인화 추천’에 적절한 메인 페이지
목표를 정했으니 다음으로는 사이트를 분석하여 요구사항 정의, 기능명세서, 시스템 아키텍처 등... 해야할 게 산더미다.
단순히 보고 따라하기만 하면 되는 거 아닌가? 하고 쉽게만 생각한 사람들이 중도에 포기하는 이유가 대부분 이런 과정을 못 버티기 때문이다.
그렇다고 설계 없이 무작정 구현부터 시작하면 99% 어딘가에서 큰 구멍이 생긴다. 그때부터 땜질하려고 하면 노력이 곱절로 들어가며, 최악의 경우 코드를 전부 엎어야 할 수도 있다.
이런 문제를 방지하려면 완벽하진 않더라도 설계 단계에서 가장 중요한 골격을 만들어 놓아야 한다. 그리고 그걸 기록해두고 자신이 맞는 방향으로 가고 있는지 확인하는 것도 중요하다.
진행하는 과정을 굳이 포스팅으로 남기는 것도. 내가 어떤 과정을 거쳐서 결론에 도달했는지,
기록하지 않으면 금방 잊어버리게 된다. 😅
게다가 직장에 다니다 보면 더더욱 신규 프로젝트를 A부터 Z까지 할 일도 없고...
이렇게라도 묵혀둔 전공책들을 꺼내볼 계기를 만들어본다.