<div id="readability-page-1" class="page"><div itemprop="articleBody">
    <h2 id="vwavwa">VWAVWA</h2>

<p>카톡테마를 제작해서 배포하는 일을 취미 겸 스트레스 해소용으로 하고 있다. <br>
아이디어가 떠올라 테마를 만들던 중 문득 카톡테마를 모아서 보여주는 플랫폼이 있으면 어떨까 생각을 하게되어서 <code>VWAVWA</code>프로젝트를 시작하게 구상하게 되었다.</p>

<blockquote>
  <p><a href="https://vwavwa.studio/">VWAVWA 봐봐</a></p>
</blockquote>

<p>상업적인 프로젝트로 진행할 계획이 없어서 수익이 발생하지 않으므로 주변의 개발자에게 협업을 제안하기가 미안했기에 그냥 혼자 1인 개발을 하기로 했다.<br>
사이드프로젝트지만 기본적으로 수요도 있어야하고, 1인 개발로서 많은 비용을 들이고 싶지않아서 2일정도는 수요조사 및 기획 및 구상을 했다.</p>

<h2 id="수요-조사">수요 조사</h2>

<ul>
  <li>주로 카카오톡 테마를 업로드하는 네이버블로그의 경우 하루 방문자 수 <strong>최소 1.000명</strong></li>
  <li>가끔 카톡테마를 업로드하는 내 블로그의 경우 일주일 동안의 게시글 조회수 <strong>최소 2,000</strong></li>
</ul>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/1.jpg" alt="1"></p>

<p>수요조사를 해보았을 때 이용자는 하루에 최소 <em>50~100명</em>이라고 생각했고, 진행하기로 했다.</p>

<h2 id="0원-쓰기">0원 쓰기</h2>

<p>물론 비용을 들이면 높은 퀄리티를 낼 수 있겠지만 초창기엔 이용자나 트래픽도 적고,<br>
추후에 계속 서비스를 할 지도 불분명해서 최대한 비용을 안드는 쪽으로 노력해보았다.<br>
그리고, 상업적인 서비스가 아니기때문에 다양한 오픈소스 및 플랫폼을 이용할 수 있다고 생각했고,<br>
아직 학생신분이라서, <strong>Github Student Developer Pack</strong> 을 충분히 활용하려고 했다.</p>

<h3 id="도메인">도메인</h3>

<p>이름은 <code>VWAVWA 봐봐</code>로 정한 뒤, <a href="https://www.name.com/partner/github-students">Name.com</a>에서 <strong>Github Student Developer Pack</strong> 을 이용해 <strong>무료로 도메인</strong> 을 얻었다.</p>

<h3 id="네임서버">네임서버</h3>

<p>네임서버는 <a href="https://www.cloudflare.com/ko-kr/">Cloudflare</a>로 정했는데, 사실 큰 이유는 없고 익숙하고 유명하며, <strong>무료</strong> 라서 사용하게 되었다.</p>

<h3 id="배포">배포</h3>

<p><strong>Node.js</strong> 즉, <strong>Javascript</strong> 로 개발을 빠르게 할 예정이여서 PaaS인 <a href="https://www.heroku.com/github-students">Heroku</a>로 배포했으며,<br>
<strong>Github Student</strong> 를 등록해 크레딧을 받았다.<br>
Heroku는 원래도 무료이지만, Free의 경우 30분 동안 요청이 없을 경우 쉬게 sleep 상태가 되므로 Uptimebot 등을 이용하는 트릭을 써야했다.<br>
하지만, 이번엔 크레딧을 받았으므로 Hobby Dyno로 업그레이드를 후 <strong>never sleeps</strong>, <strong>Application metrics</strong> 등을 얻게되어서 관리가 좀 더 쉬워졌다.</p>

<h2 id="페이지-구상하기">페이지 구상하기</h2>

<p>개발에 돌입하기 전, 무슨 기능들과 페이지들이 필요한지 생각했다.<br></p>
<ul>
  <li>헤더 : 로고, 메뉴(인기테마, 모든테마, Q&amp;A)</li>
  <li>푸터 : 테마 저작권에 대한 문구, 연락처</li>
  <li>메인 : 간단한 소개와 인기테마 보여주기</li>
  <li>인기테마 : 조회수 순으로 정렬</li>
  <li>모든테마 : 최신순으로 정렬
    <ul>
      <li>테마별 색상 표기하기</li>
    </ul>
  </li>
</ul>

<p>까지 처음 구상을 하고 개발에 돌입했었다.<br>
모든 테마 메뉴에서 IOS와 ANDROID 중 하나를 체크박스로 선택을 하면, 페이지 이동없이 컴포넌트들만 재정렬하고 싶었으나<br>
AJAX를 공부할 시간이 필요해 IOS, ANDROID를 메뉴에 추가시켜 일단 라우팅을 시켰다.</p>

<ul>
  <li>헤더 : 로고, 메뉴(인기테마, 모든테마, <strong>IOS, ANDROID</strong>, Q&amp;A)</li>
</ul>

<p>필요한 기능은</p>
<ul>
  <li>테마 제작자 등록
    <ul>
      <li>제작자이름과 매칭되는 고유번호 발생</li>
    </ul>
  </li>
  <li>테마 등록
    <ul>
      <li>고유번호로 제작자 구별</li>
      <li>파일은 클라우드나 타 플랫폼에 업로드 후 주소 공유</li>
    </ul>
  </li>
  <li>테마 비밀번호
    <ul>
      <li>다운로드를 받기 위한 비밀번호 설정 가능</li>
    </ul>
  </li>
</ul>

<p>카카오톡테마 파일을 직접 다운되게 하고 싶었으나, 파일업로드 시 우려되는 보안문제 <br>
그리고 무료 서비스를 이용 중이기에 클라우드 서버의 용량이 부족해질 것이 문제될 것이라 예상해서 타 플랫폼 주소공유로 결정했다.</p>

<h2 id="프론트엔드-개발하기">프론트엔드 개발하기</h2>

<p>HTML, CSS, JS를 할 줄은 알지만 디자인과 UI/UX는 다룰 줄 모른다.<br>
이런 내가 혼자서 반응형 웹 + 디자인을 하기엔 굉장히 무리라고 생각해 CSS 프레임워크를 이용하기로 했다.</p>

<h3 id="부트스트랩-스튜디오">부트스트랩 스튜디오</h3>

<p>웹 디자인 및 프로토타입을 빠르게 제작할 수 있는 툴인 <strong>Bootstrap Studio</strong> 를 이용해보려했으나,<br>
디자인 소스가 많지 않고, 원하는대로 만들기에 조잡스러운 면이 있어 추후에 내가 코드를 수정하는게 더 오래걸릴 거같다는 판단을 내리고 사용을 포기했다.</p>

<h3 id="bulma">Bulma</h3>

<p>기능도 심플하고, 가벼운게 마음에 들어서 사용을 해보려고 프로토타입을 제작을 했으나 배치부터 모바일 반응성 그리고 촌스럽지않은 느낌을 내기란 어려웠다.<br>
역시 할 줄 아는 것과 잘 하는 것의 차이를 다시금 깨닫고, 프론트엔드 공부를 더 열심히 하지않은 나를 자책하며 괜찮은 무료 템플릿을 열심히 검색했다.</p>

<h3 id="startup-3">Startup 3</h3>

<p>Designmodo에서 Bootstrap builder로 빠르게 프로토타입을 만들 수 있는 <a href="https://designmodo.com/startup/">Startup 3</a> 서비스를 제공하고 있었고,<br>
디자인이 너무도 내가 원하는 깔끔하고 간소한 느낌이였고, 익숙한 Bootstrap을 사용해서 수정도 어렵지 않을 것이라고 생각했다.<br>
그리고 제일 중요한 라이센스도 개인, 상업적 이용 모두 허용임을 확인했다.</p>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/2.jpg" alt="2"></p>

<h2 id="백앤드-개발하기">백앤드 개발하기</h2>

<p>얼마전까지 열심히 공부하던 GO로 개발하고 싶었으나 시간이 많이 소요될 듯하여, <strong>Node.js &amp; Express.js</strong> 를 사용했다.<br></p>

<h3 id="데이터베이스">데이터베이스</h3>

<p>보안을 전공하고, 컨설턴트로 인턴 중인 나에게 중요한 부분 중 하나였고, 데이터베이스에 개인정보로 취급되는 정보를 수집 및 저장하지 않는 이유도 해킹발생 우려때문이다.<br>
MongoDB Cloud인 <strong>MongoDB Atlas</strong> 를 사용했으며 DB에 관해서 꼼꼼히 신경써서 설정했다.</p>

<p>[x] MongoDB Atlas도 물론 무료로 이용가능하다.</p>

<h3 id="보안-점검">보안 점검</h3>

<p>처음에는 테마 등록에 제한을 두지 않았는데, 자동화 공격이 가능하단 점이 취약점이므로 하루에 한 개의 업로드만 가능하도록 제한을 두었다.</p>

<p>기능도 간소하고, 페이지도 적어서 취약점 점검을 간단하게만 했다.<br></p>
<ul>
  <li>사용자가 많아지면 주변의 보안을 하는 친구들과 제대로 취약점 점검을 해보려고 계획 중이다.</li>
</ul>

<p>NoSqlInjection과 XSS는 내 수준에선 다 막아뒀는데, 조금 걱정이 되긴한다.</p>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/3.JPG" alt="3"></p>

<h2 id="완성">완성</h2>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/5.JPG" alt="5"></p>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/6.JPG" alt="6"></p>

<p>14일 밤에 런칭해서, 약 3일의 시간이 지났는데 <strong>구글 애널리틱스</strong> 에 결과에 의하면 하루에 50~90 정도의 방문자가 발생되고 있다.</p>

<p><img src="https://miryang.dev/files/img/start-sideproject-vwavwa/4.JPG" alt="4"></p>

<h2 id="todo">TODO</h2>

<p>앞으로 해야할 또는 하고 싶은 업데이트는</p>

<ul>
  <li>검색 기능</li>
  <li>색상별 필터링</li>
  <li>테마별 기획전</li>
  <li>메일링 서비스</li>
  <li>홍보
    <ul>
      <li>제일 중요하지만 어떻게 할 지 아이디어가 없음</li>
    </ul>
  </li>
</ul>

<h2 id="마치며">마치며</h2>

<p>사이드 프로젝트를 기획하고 있는 분들에게 1%라도 도움이 될까 싶어서 적은 글이며,<br>
궁금한 점이 있다면 언제든 연락해도 괜찮다.</p>

<p>그리고 혼자서 실제 웹을 런칭하고 운영하는 것이 처음이라 미흡한 점이 굉장히 많을텐데 아이디어나 조언도 아낌없이 받고 싶다.</p>

<blockquote>
  <p><a href="https://vwavwa.studio/">VWAVWA 봐봐</a></p>
</blockquote>

  </div></div>

MiryangJung

VWAVWA
카톡테마를 제작해서 배포하는 일을 취미 겸 스트레스 해소용으로 하고 있다. 
VWAVWA프로젝트를 시작하게 구상하게 되었다.
VWAVWA 봐봐
상업적인 프로젝트로 진행할 계획이 없어서 수익이 발생하지 않으므로 주변의 개발자에게 협업을 제안하기가 미안했기에 그냥 혼자 1인 개발을 하기로 했다.
수요 조사
주로 카카오톡 테마를 업로드하는 네이버블로그의 경우 하루 방문자 수 최소 1.000명
가끔 카톡테마를 업로드하는 내 블로그의 경우 일주일 동안의 게시글 조회수 최소 2,000
수요조사를 해보았을 때 이용자는 하루에 최소 50~100명이라고 생각했고, 진행하기로 했다.
0원 쓰기
물론 비용을 들이면 높은 퀄리티를 낼 수 있겠지만 초창기엔 이용자나 트래픽도 적고,
Github Student Developer Pack 을 충분히 활용하려고 했다.
도메인
이름은 VWAVWA 봐봐로 정한 뒤, Name.com에서 Github Student Developer Pack 을 이용해 무료로 도메인 을 얻었다.
네임서버
네임서버는 Cloudflare로 정했는데, 사실 큰 이유는 없고 익숙하고 유명하며, 무료 라서 사용하게 되었다.
배포
Node.js 즉, Javascript 로 개발을 빠르게 할 예정이여서 PaaS인 Heroku로 배포했으며,
Github Student 를 등록해 크레딧을 받았다.
never sleeps, Application metrics 등을 얻게되어서 관리가 좀 더 쉬워졌다.
페이지 구상하기
개발에 돌입하기 전, 무슨 기능들과 페이지들이 필요한지 생각했다.
  
헤더 : 로고, 메뉴(인기테마, 모든테마, Q&A)
푸터 : 테마 저작권에 대한 문구, 연락처
메인 : 간단한 소개와 인기테마 보여주기
인기테마 : 조회수 순으로 정렬
모든테마 : 최신순으로 정렬
    
테마별 색상 표기하기
까지 처음 구상을 하고 개발에 돌입했었다.
헤더 : 로고, 메뉴(인기테마, 모든테마, IOS, ANDROID, Q&A)
필요한 기능은
테마 제작자 등록
    
제작자이름과 매칭되는 고유번호 발생
테마 등록
    
고유번호로 제작자 구별
파일은 클라우드나 타 플랫폼에 업로드 후 주소 공유
테마 비밀번호
    
다운로드를 받기 위한 비밀번호 설정 가능
카카오톡테마 파일을 직접 다운되게 하고 싶었으나, 파일업로드 시 우려되는 보안문제 
프론트엔드 개발하기
HTML, CSS, JS를 할 줄은 알지만 디자인과 UI/UX는 다룰 줄 모른다.
부트스트랩 스튜디오
웹 디자인 및 프로토타입을 빠르게 제작할 수 있는 툴인 Bootstrap Studio 를 이용해보려했으나,
Bulma
기능도 심플하고, 가벼운게 마음에 들어서 사용을 해보려고 프로토타입을 제작을 했으나 배치부터 모바일 반응성 그리고 촌스럽지않은 느낌을 내기란 어려웠다.
Startup 3
Designmodo에서 Bootstrap builder로 빠르게 프로토타입을 만들 수 있는 Startup 3 서비스를 제공하고 있었고,
백앤드 개발하기
얼마전까지 열심히 공부하던 GO로 개발하고 싶었으나 시간이 많이 소요될 듯하여, Node.js & Express.js 를 사용했다.
데이터베이스
보안을 전공하고, 컨설턴트로 인턴 중인 나에게 중요한 부분 중 하나였고, 데이터베이스에 개인정보로 취급되는 정보를 수집 및 저장하지 않는 이유도 해킹발생 우려때문이다.
MongoDB Atlas 를 사용했으며 DB에 관해서 꼼꼼히 신경써서 설정했다.
[x] MongoDB Atlas도 물론 무료로 이용가능하다.
보안 점검
처음에는 테마 등록에 제한을 두지 않았는데, 자동화 공격이 가능하단 점이 취약점이므로 하루에 한 개의 업로드만 가능하도록 제한을 두었다.
기능도 간소하고, 페이지도 적어서 취약점 점검을 간단하게만 했다.
  
사용자가 많아지면 주변의 보안을 하는 친구들과 제대로 취약점 점검을 해보려고 계획 중이다.
NoSqlInjection과 XSS는 내 수준에선 다 막아뒀는데, 조금 걱정이 되긴한다.
완성
14일 밤에 런칭해서, 약 3일의 시간이 지났는데 구글 애널리틱스 에 결과에 의하면 하루에 50~90 정도의 방문자가 발생되고 있다.
TODO
앞으로 해야할 또는 하고 싶은 업데이트는
검색 기능
색상별 필터링
테마별 기획전
메일링 서비스
홍보
    
제일 중요하지만 어떻게 할 지 아이디어가 없음
마치며
사이드 프로젝트를 기획하고 있는 분들에게 1%라도 도움이 될까 싶어서 적은 글이며,
그리고 혼자서 실제 웹을 런칭하고 운영하는 것이 처음이라 미흡한 점이 굉장히 많을텐데 아이디어나 조언도 아낌없이 받고 싶다.
VWAVWA 봐봐

가성비 넘치게 0원으로 사이드프로젝트 VWAVWA 시작하기

댓글