0x0 : PROLOGUE
이번 글에서는 나의 커리어를 담아보고자 직접 개발한 차세대 플래너를 소개 해보려 한다. 간단한 토이 프로젝트이다. 보안 공부를 하게 되면서 웹 개발도 어쩔 수 없이 배워야만 했는데, 대략적으로 기초적인 웹 개발 기술 스택 HTML, JavaScript, CSS, PHP, MySQL 정도를 학습했었다. 모든지 배운건 직접 어딘가에 적용해봐야 한다는 것이 신념인지라 웹 기술을 이용하여, 현재 나에게 꼭 필요한 플래너를 만들게 되었다.
글쓴이는 아직 학생 신분이고 공부도 딱히 못한다. 그래서 항상 학교가서 그냥 알고리즘 문제 풀거나 친구들이랑 놀다가 헬스장 간 다음에 집에서 개발 공부 아니면 게임만 하는게 내 인생이 되어버렸다. 이러한 인생이 잘못된 건 아니지만, 뭔가 공허함이 들었다. 개발 공부도 그냥저냥이고 게임을 할 때는 재밌지만 그 뒤에는 허무함만 느낄 뿐 이였다.
그렇다. 뭔가 동기가 전혀 느껴지지 않는다. 어떤 무언가를 집중해서 해야 한다는건 머릿속으로는 알고 있지만 의욕이 나지 않았다. 인생의 재미가 점점 사라졌다.
그러다 평소 즐기는 게임인 'Cyberpunck 2077'를 하다가 실제 인생을 한 번 게임처럼 해보면 어떨까?라는 생각이 들었다. 레벨업도 하고 일종의 계급도 만들면서 말이다. 게임이 일종의 영감을 얻게 해준다는건... 이번 경험이 처음이 아닐까 싶다. 확실히 인생을 게임처럼 살 수 있다면 재밌을 거 같아서 마침 웹 개발을 배운겸 인생을 게임처럼 만들어 보기로 결심한다.
0x1 : Service Introduction
먼저, 메인 페이지의 전체적인 인터페이스는 위와 같다. System 스택은 오늘 하루에 무조건 끝내야 하는 리스트다. System의 일을 모두 끝내야만 Level up 스택에 해야할 일을 수행할 수 있다.
System의 일을 끝낼 때마다 버튼 리스트(해야할 일)를 클릭하여 Complete 스택으로 옮길 수가 있는데, Level up 스택도 마찬가지다. 단, Level up 스택에 있던 목록이 Complete로 옮겨지면 스텟 포인트를 얻게 된다.
스탯 포인트는 Stat 버튼에서 사용할 수 있다. 실제 게임 스탯창 처럼 구현하려고 노력했다.
Super Ripperdac, Basic Ripperdac에서는 System에서 해야할 일과 Level up에서 해야할 일을들을 추가할 수 있는 인터페이스를 제공한다. 마찬가지로 Add 버튼으로 추가한 버튼 리스트(해야할 일)를 상호작용하면 Delete 스택 영역으로 이동되면서 삭제된다. 혹시나 잘못 입력한 경우를 대비하여 만들어놓은 기능이다.
Classess 버튼은 현재 보유한 스탯에 따라 계급을 정해주게 되는데, 계급 목록이라고 보면 될 거 같다. 일종의 칭호와 같은 시스템을 구현하려고 했다.
History 버튼에서는 현재 Level up에서 했던 일들을 적어놓을 수 있다. 나중에라도 혹시 스탯을 잘못 찍었을 경우라던지 스탯 계산이 맞지 않을 때, Histroy 웹 페이지에 적혀진 기록을 본다면 이러한 에러(Error)사항을 줄여볼 수 있다.
Rset 버튼을 누르면 현재 나의 스탯 정보와 계급 정보가 출력된다. 정말 이게 도움이 될까?라고 생각할 수 있지만 나에게는 정말 도움이 많이 되었다. 스스로가 발전되는 모습을 시각적으로 보여주므로써 무엇보다 큰 동기부여를 얻을 수 있었다. 현재 총 38까지 스탯을 찍었다. 앞으로 계속 해볼 생각이지만 이것도 분명 한계가 있을 거다. 완벽한 플래너라고는 장담하지는 못하겠다.
Link : https://github.com/V123-dev/LevelSystem
해당 차세대 플래너는 깃허브(Github) 에서 다운로드가능하며, 직접 이용해볼 수 있다.
혹시나 자신의 상황에 맞는 플래너로 바꾸고 싶다면 깃허브(Github)의 가이드라인을 따라주면 될 거 같다.(물론, 가이드라인이 그렇게 친절하진 않음..^^;)
0x2 : Technology
해당 서비스를 개발하면서 사용한 기술과 알고리즘을 다뤄보려 한다. 무엇보다 이 프로젝트를 진행하면서 CSS의 디자인 능력을 많이 키워볼 수 있었다.
메인 페이지를 구현할 때는 div안에 div를 종속 시키는 방향으로, 디자인을 설계 했다. 그러면 크게 잡아놓은 div로 위치를 잡아주면 나머지 종속된 div 2개 박스도 같이 움직이게 된다.
스탯창을 구현할 때는 div안에 div를 종속시킨다는 것은 전과 비슷하지만, 이번에는 div안에 있는 특정 객체에 대해 div를 적용시킴으로써 Box(모델)이 밑으로 내려간다던지 밀린다는 물리적인 단점이 사라진다.
버튼 리스트(해야할 일)를 다른 스택 영역으로 옮기는 작업은 자료구조(Array)을 사용했다. 연속된 데이터는 역시 배열이 제일 적합했다고 생각했다. 그리고 버튼을 생성할 때마다 인덱스(Index)값을 같이 저장해서 나중에 데이터를 탐색할 때 찾기 쉽도록 설계했다. 이렇게 설계를 해놓으면 인덱스(Index)값으로 실제 저장해놓은 배열에서 객체(Object) 정보를 얼마든지 가져올 수 있다
0x3 : EPILOGUE
개발을 해보면서 느낀건 막상 설계도를 세웠지만, 초반에는 구현하려는 것을 웹 기술 스택으로 어떻게 구현해야 할지에 대한 감이 전혀 없는 상태여서 그냥 부딪혀 보면서 일단 만들어야 하는 것들을 무지성으로 하다보니 오류도 많이 나고 머리가 터질 뻔 했다. 확실히 프로그램을 만들기 전에는 설계도를 잘 세우는게 중요하다고 생각한다. 마지막 기능 중 하나인 Rset버튼 기능은 감을 어느정도 잡아둔 상태라 제대로 설계도를 한번 짜서 코드를 짜보니 오류 빈도 수가 기하급수적으로 줄여졌고 확실히 개발 시간이 그 전보다 더 단축된 느낌이였다. 물론, 작은 기능이여서 그럴수도 있지만 분명 나는 느꼈다.
개발 기간은 총 7일로, 학교 공부도 거의 포기하면서 개발에 몰두했다. 학교에서는 설계도를 짜거나 개발에 대한 고민을 계속했어서 수업은 거의 안 들었다. 아마 내 우선순위 상으로는 이 시스템을 개발하는 것이 더 중요하다고 생각했기 때문이었을테니 말이다. 그래서 그런지 머리가 계속 띵하고 미치는줄 알았다. 학교가 끝나면 4시25분쯤 되는데 바로 헬스장 갔다가 석식 먹고 집 오면 한 7시쯤 된다. 7시부터 11시까지 학교에서 짰던 설계도 적용시키고 역시나 다를바 없이 오류가 엄청 났고 해결하느라 시간을 다 잡아먹었다. 그렇게 11시부터 12시까지 밖에 나가서 운동하면서도 계속 왜 오류가 났는지를 생각만 했다.
다시 돌이켜보면 다시 개발하고 싶다는 생각이 들지 않을정도로 엄청 몰두 했었던 거 같다. 농담으로 100만원을 준다해도 이런 무모한 개발은 신중하게 생각한 뒤에 다시 도전하지 않을까 싶다. 웹 개발 초보자인 나에겐 너무나도 힘든 프로젝트였다. 특히, 웹은 저번부터 나하고 맞지 않는 타입이라 원하는대로 만들어지지도 않아서 화도 많이 났다. 그래도 결국, 처음에 두려워했던 것들을 이뤄낸 내 모습을 보면 자신감이 생기기도 하지만 일단은 당분간은 개발을 쉬면서 휴식 기간을 가지려고 한다. 물론, 웹 프로젝트를 여기서 그만두는 건 아니다. 그래도 이제 웹으로 원하는 건 어느정도 구현이 가능해 보인다.
