함께하는 웹 개발 - 개론

html 템플릿

개발에 들어가기에 앞서

 

저는 게임 개발 업계에 들어왔을 때 게임 기획자로 시작했습니다. 게임 기획을 시작하는 분들은 아마 대부분 그렇겠지만 자신이 머릿속에 그리는 게임을 개발하고 싶다는 생각을 하고 업계에 발을 들입니다. 

그러나 생각합니다. "이대로는 내가 원하는 게임을 만들 수 없을 것이라고." 

회사에서 요구하는 장르부터 시작해 다른 개발자들과의 마찰 등등 어느 순간부터 내가 게임을 개발하는 건지 단순 사무 업무를 하고 있는 건지 헷갈립니다. 그럼 어떻게 해야 할까요? 

저는 제가 대표가 되어 직접 게임을 만들어보기로 했습니다. 물론 그전에 게임 개발에 대해 배워야겠지만요.

 

웹 개발은 생각보다 참 쉽습니다. 실제로 유튜브에 있는 강의나 오프라인 강의를 찾아보면 HTML은 일주일 정도에 습득할 수 있는 수준입니다. 그러나 그보다 더 중요한 것은 하루라도 빨리 코딩에 대해 친숙해진다는 것입니다.

코딩에 대해 친숙해진다는 것은 Unity나 C# 뿐만 아니라 다른 어떤 언어에 대해서도 언제든지 배울 수 있는 상태가 된다는 것입니다.

 

저는 앞으로 "함께하는 웹 개발"을 통해 여러분들과 자그마한 웹 사이트 처음부터 끝까지 만들어보려고 합니다.

개발 툴과 사용되는 언어에 대한 간단한 설명부터 시작해 각 페이지 별로 로직을 함께 짜 볼 계획입니다.

개발에 있어서 처음이거나 Vue.js에 입문하시려는 분들을 위해서 준비했다는 점 미리 말씀드립니다.

 

 

프런트엔드 프레임워크(Frontend Framework) - Vue

 

프런트엔드 프레임워크란 웹/앱을 제작하기 기본 틀입니다. 프레임워크에 따라 어떤 언어를 사용하는지, 로직이 어떻게 구현되는지를 결정됩니다. 시장에서 가장 많이 고려되는 Vue / React / Angular 중에서 가장 쉽기 때문에 Vue 선택하였습니다(이외에도 Ember / Knockout / Polymer / Riot 등이 있습니다). 

 

회사에서 프로젝트를 진행한다면 다른 많은 부분을 고려해야겠지만 저희가 개발에 익숙하지 않다는 것을 전제로 했을 때 가장 중요하게 고려해볼 것은 학습 시간입니다.

Angulr의 경우 프레임워크 API가 워낙 규모가 크기 때문에 익숙해지기 전까지는 작업의 생산성이 떨어집니다. 물론 익숙해지고 나면 API를 자유자재로 활용하여 생산성이 증가하고 대규모 프로젝트를 진행하기에 용이하다는 장점이 있으나 저희는 작은 규모의 프로젝트를 진행할 것이기 때문에 이는 제외합니다.

React는 모든 것이 JavaScript로 이루어지며 모든 컴포넌트는 JSX를 사용하는 렌더링 함수를 통해 UI가 표현됩니다. 쉽게 말해 JavaScript에 익숙하지 않은 사람들에게는 학습 시간이 많이 필요합니다. 

반면 Vue는 Html과 CSS를 사용할 수 있으며 필요에 따라 JSX 지원을 사용할 수 있습니다. 위에서도 잠깐 소개했지만 HTML의 경우 그 원리만 알면 쉽게 익혀 사용할 수 있기 때문에 이는 개발 시간과 학습 시간 단축에 큰 도움이 됩니다.

 

 

UI 프레임워크(UI Framework) - Vuetify

 

UI 프레임워크란 화면에 표시되는 UI를 효율적으로 구성하는 도구입니다. 

저희가 프런트엔드 프레임워크에서 이미 Vue를 사용하기로 결정하였으므로 Vue에 최적화된 선택지만 고를 수 있습니다. 그중 Vuetify는 Vue 전용 프레임워크로 2014년 출시 이후 현재까지 꾸준히 업데이트되고 있으며, 사용법이 어렵지 않아 선택하게 되었습니다. 그리고 현재 업데이트 중인 Vue3 Alpha 버전을 사용해보았는데 상당히 퀄리티가 괜찮았습니다. 원래 2022년 beta 버전이 2월 출시 예정이었기 때문에 기대를 해도 될 것 같습니다.

 

 

언어 - HTML / CSS / TypeScript

 

Vue는 다음과 같은 3가지 언어를 사용하며, 각 언어가 사용되는 위치와 기능이 명확하게 구분됩니다.

1. 웹에 보이는 UI를 구성하기 위하여 HTML (template 영역)

2. UI의 디자인을 변경하기 위한 CSS  (style 영역)

3. 컴포넌트의 기능이나 작동 방식을 변경하기 위한 JavaScript(TypeScript)  (script 영역)

 

위 언어가 어떤 언어인지 가볍게 살펴보기 위해 3가지 언어가 모두 사용된 간단한 코드를 보고 이번 포스팅은 마치겠습니다. 다음에는 프로젝트 구성 방법부터 본격적으로 시작하겠습니다.

<template> 
  <v-btn class="hiBtn" block @Click="SayHello">
    Block Button
  </v-btn>
</template>

<script>  
 SayHello() {
  console.log('Hello')
 }
</script>

<style> 
.hiBtn {
 color = #red
}
</style>