#1. [Node.js] 웹 어플리케이션 개발 - 사이트 기획

1. 웹 어플리케이션 구축

  개발 공부를 하는데 있어 이론만 공부하는 건 정말 바보 같은 짓이다. 이 과정을 정말 재미도 없고 머리에 잘 들어오지도 않는다. 우린 앞서 3단계의 과정으로 Vue.js, Nuxt.js, Node.js를 배웠다. 각각의 개념에 대해 간략한 소개와 개발 환경 구축 방법을 배웠다. 그다음 간단한 문법과 작동 원리에 대해 배웠다. 앞서 배운것만 잘 응용한다면 우린 웹 어플리케이션 하나를 만들 수 있다.

  하지만 노트북을 들고 어플리케이션을 막상 개발할려고 하니 쉽지가 않을 것이다. 특히나 개발을 한번도 안해본 사람들은 더더욱 그렇다. 이제 앞서 배운 이론들이 어떻게 적용되어 우리가 원하는 웹 애플리케이션이 되는지 살펴보자.

  사이트 기획 전에 기초적으로 알아야할 사항을 복습해보자.

1) Server & Client

  서버와 클라이언트가 어떤 것을 의미하는지는 기본적으로 알아야한다. 앞서 오랜시간 설명을 해왔기에 모르는 사람들은 없을 것이다. 클라이언트는 사용자들이 보게되는 화면이고 웹 서버는 클라이언트에게 정보를 전달해주는 주체이다. 그리고 우리가 배운 Vue.js는 클라이언트 구축에 쓰이고, Node.js는 웹 서버에 쓰일 것이다.

2) 개발 환경 구축

  개발을 위해서는 수많은 테스트를 진행해야 한다. 우리가 기획한 사이트나 서버를 한번에 떠올려 구축하는 개발자는 아무도 없다. 아무리 머리가 뛰어난 개발자라도 수없는 테스트를 진행할 것이다. 우린 실제로 서비스를 세상에 내놓기 전에 코드를 작성하고 테스트를 진행하게 된다.

  개발 도구는 정해진게 없다. 자기에게 가장 익숙한 툴을 사용하면 된다. 다만 각각의 개발 환경에 따라 호환해주는 언어가 다르고, 디버깅과 테스트 방식이 제각각이다. 웹에 최적화 된 개발 환경도 있고, 모바일에 최적화 된 개발 환경도 있다. 그리고 개발 환경중에는 유료툴도 존재한다. 그러니 이런 점들을 잘 생각해서 선정해야 한다. 

  그리고 개발 환경 마다 실행 가능한 운영체제도 모두 다르다. 아래는 사람들이 많이 사용하는 IDE에 대한 목록이다.

IDE	운영 체제	개발 언어	특징
Eclipse	Windows, Linux, Solaris, AIX,   Mac OS	Java, C, C++, PHP, JSP	오픈소스
Visual Studio	Windows	C, C++, Visual Basic	마이크로소프트사 개발
IntelliJ IDEA	Windows, Mac OS, Linux	Java, Kotlin, Groovy	JetBrains사 개발
Dev-C++	플랫폼	C, C++
NetBeans	크로스 플랫폼	Java, JavaScript	JVM 기반
X Code	Mac OS	Swift, Java, C, C++	Mac OS 용
Android Studio	Windows, Linux	Java, Kotiln	모바일 개발 특화

  지금 작성한 개발 환경들은 대표적인 것만 나열 한 것이도 이 외에도 상당히 많이 존재한다.

  초보 개발자들을 위해 추천을 한다면 가장 많이 사용하고 있는 개발 환경은 Eclipse와 Visual Studio이다. 둘다 무료로 사용할 수 있는 점이 가장 큰 장점이다. 주로 Java 개발은 Eclipse로 진행하고 C, C++, JavaSciprt 개발은 Visual Studio로 개발한다. 

  필자 같은 경우는 Visual Studio는 여전히 잘 사용하고 있고, Eclipse는 개인적으로 불편한 점이 많이 Java 언어 개발 시 JetBrains 사에서 개발한 IntelliJ IDEA를 사용하고 있다. 다만 이 툴의 경우 유료 라이선스가 존재한다.

Visual Studio 화면

2. 사이트 기획

  개발에 앞서 우리가 무엇을 만들지를 정해야 한다. 사실 개발보다 더 중요한 것이 주제 선정과 기획이다. 우리가 만드려는 서비스가 명확하다면 뒤의 기획 개발 단계가 수월할 것이다. 하지만 그렇지 못하다면 계속 첫 기획과 개발 단계를 왔다갔다 하면서 혼란을 겪게 될 것이다. 

1) 서비스 주제 선정

  정말 자신이 하고 싶은 주제 무엇이든 좋다. 이번에 필자는 예시로 NBA 선수들을 많이 데려왔으니 이에 관련된 사이트를 만드는 작업으로 예시를 보여드리고자 한다. 

주제 : NBA 각 팀별 선수 소개 페이지

2) 대표 화면 스케치

  주제를 선정했다면 사이트 개발 이전에 필수적으로 작성해야 하는 기획서가 있다. 실제 현업에서는 기획자가 이 문서들을 작성하여 개발자에게 전달하게 된다. 그 단계를 수행하기 전에 우리가 만드려는 사이트의 대표적인 화면을 스케치 해보는 것은 좋은 작업이다.  앞서 만든 주제를 좀더 구체화 하는 효과가 있을 뿐더로 글로 작성한 주제보다 더 명확하게 협업자들에게 각인 시킬 수 있다.

  한마디로, 우리가 작성한 주제를 시각화하여 표현한다고 생각하면 된다.

  위 화면이 최종적으로 만들려는 나의 화면이다. NBA 팀에서 가장 활약도가 높은 선수 다섯명을 보여줄 것이다. 초기 스케치는 너무 구체적이지 않아도 된다. 이 단계에서 가장 중요한 것은 주제의 명확성이다. 물론, 개발에 있어 명확성과 구체성 모두 중요하다. 하지만 구체성은 뒤에서 계속 보완이 가능하다.

  참고로, 위 화면은 Kakao 사에서 제작한 스토리보드 제작 툴은 Oven을 이용한 것이다. 

3) 사이트 기획 작업

  여기서 부터는 기획자와 개발자의 협업 방식에 따라 많은 차이를 보일 것이다. 정해진 순서는 없지만 필수적으로 해야하는 단계이다.

  누구들은 자신의 경험을 빗대에 기획 단계와 순서를 구체화 하려고 하는데, 개인적으로 별로 좋아하지 않는다. 개발하려는 서비스와 회사에 맞게 편리한대로 시작하면 된다. 과거의 사례에 매달리는 것 만큼 멍청한 건 없다. 자유롭게 혁신을 시도해보자.

  다음은 기획 단계에서 많이 작성하는 문서들이다. 하나하나 소개하는 것은 이번 사이트 개발 소개의 취지와는 많이 다르므로 간략히만 소개하도록 하겠다. 클라이언트와 서버가 어떻게 이뤄지는지 살펴보는 것이 우리의 목표다.

• 페르소나 및 시나리오 : 웹 서비스 사용자에 대한 기본 정의 및 액션 시나리오 작성
• 사이트 정책 정의 : 사이트 순서 및 절차에 대한 정의
• 서비스 계획서 : 서비스에 대한 종합 계획서
• IA (Information Architecture) : 서비스에 필요한 정보 구조 정의
• 플로우 차트 : 사용자의 서비스 행동 순서도, UML 등을 이용하여 작성
• 스토리보드 : 사이트에 대한 전체적인 구현