사이드 프로젝트 웹사이트 만들기: 첫 시작을 위한 가이드

요즘 머릿속에 계속 맴도는 웹 서비스 아이디어가 하나 있다. 어떤 서비스인지는 아직 구체적으로 밝히기 어렵지만, 개발이 어느 정도 완료되면 이 블로그에 가장 먼저 공개할 생각이다.

아이디어는 확실한데 막상 모니터 앞에 앉으니 어디서부터 손을 대야 할지 막막했다. 그래서 나처럼 새로운 사이드 프로젝트를 시작하려는 사람들을 위해, 그리고 내 머릿속을 정리할 겸 웹사이트 제작의 초기 단계를 정리해 보았다.

1. 기획: 이 서비스를 누가, 왜 쓸까?

가장 먼저 해결해야 할 질문이다. 만들고자 하는 서비스의 타겟층이 누구인지 명확히 해야 한다. 그리고 기존에 존재하는 유사한 서비스들과 비교했을 때, 내 사이트만이 가질 수 있는 차별점(핵심 가치)이 무엇인지 한 줄로 정의할 수 있어야 한다. 이 뼈대가 튼튼해야 이후 작업이 흔들리지 않는다.

2. 데이터 수집 및 로직 구성

서비스의 핵심이 되는 결과물을 사용자에게 어떻게 제공할 것인지 결정하는 단계다.

• 직접 구축: 필요한 데이터를 직접 수집해 데이터베이스를 만든다.
• 외부 API 활용: 이미 잘 구축된 외부 데이터 API를 가져와서 활용한다.
• AI 도입: 챗GPT 등의 AI API를 연결해 사용자 입력에 맞춘 결과값을 실시간으로 생성하게 만든다.

개발 난이도와 서비스의 목적을 종합적으로 고려해서 가장 효율적인 방식을 선택해야 한다.

3. 기술 스택 및 도구 선정

처음부터 완벽한 코드를 짜서 개발하는 것도 좋지만, 현재 목표는 핵심 기능만 담은 MVP(최소 기능 제품)를 빠르게 만들어 테스트하는 것이다.

• 노코드(No-code) 툴: 아임웹, 웹플로우(Webflow), 버블(Bubble) 등을 사용하면 복잡한 코딩 없이도 빠르게 사이트를 구축할 수 있다.
• 가벼운 프론트엔드 개발: HTML, CSS, JavaScript에 익숙하다면 가벼운 정적 웹페이지로 먼저 뼈대를 잡아볼 수도 있다.

가장 중요한 건 내가 현재 시점에서 가장 다루기 편하고 빠르게 결과물을 낼 수 있는 도구를 선택하는 것이다.

4. 와이어프레임(Wireframe) 작성

본격적인 제작에 앞서 화면의 레이아웃과 사용자 동선을 스케치하는 단계다. 사용자가 첫 화면에 접속해서 어떤 버튼을 누르고, 어떤 흐름을 거쳐 최종 결과 화면에 도달할지 시각적으로 정리해 본다. 노트에 펜으로 대략적인 박스와 선만 그어봐도 전체적인 구조를 파악하는 데 큰 도움이 된다.

 

머릿속에 있던 생각들을 글로 적어보니 해야 할 일들이 조금은 명확해졌다. 처음부터 완벽한 결과물을 내려고 무리하기보다는, '일단 기본 기능이 작동하는 버전을 만든다'는 생각으로 가볍게 시작해 볼 계획이다. 일단은 서비스 기획에 대해서 조금 공부를 해봐야겠다.