[💬] 만드는 겜의 4년 전 겜의 개선 ('18 3월 5주차 개발일지)

[Creta_P..(hd3306)]

안녕하세요!

오늘은 저희 CREFFECT팀이 4주년을 맞이하는 날입니다.

...만우절 농담이 아니고 진짜로 저희 팀은 실제로 4월 1일에 만들어졌는데요.

이전부터 쭉 홈페이지를 개발 중이라고 간간히 언급했었습니다만,

이번주에는 아쉽지만, 4월 1일에 기한을 맞추기 위해 마지막 주를 홈페이지 개발에 전력으로 진행했습니다.

그렇게 오늘, 드디어 홈페이지를 개설했습니다!

그래서 이번 시간에는 홈페이지에 대해 이야기를 해볼까 합니다.

그와중에 제가 과거에 만든 백색영혼 (2014)에서 문제를 발견하고, 보완하게 되었습니다.

(레벨디자인, 사소한 버그...)

그래서 이번 기회에 버전을 1.41로 업데이트 하였습니다.

일단, Git의 역사관리를 이용해 지난 개발과정들을 소개해보겠습니다.

초안 (3 / 1)

첫 날에는, 각 영역별로 무엇이 들어가야 하는 지 논의했습니다.

그래서 레이아웃을 먼저 잡고, 웹으로 만들게 되었습니다.

게임 목록은 마치 패키지 게임의 목록처럼 만드는 것이 핵심이죠.

왼쪽은 컨셉, 오른쪽은 실제로 만든 형태.

레이아웃을 디자인으로 (3 / 5)

이제 레이아웃을 디자인으로 변경하기 시작했습니다.

위치를 맞추는 데 꽤 고민했습니다.

첫 페이지의 모습

본격적인 디자인 시작 (3 / 12)

일단은 가장 쉬운 부분부터 만들기 시작했습니다.

컨텍트 부분을 준비했죠.

JSON과 정보들 (3 / 19)

다음으로, 정보를 표시하기 위해 JSON을 사용했습니다.

게임 목록은 swiper.js를 사용해서 만들었습니다.

게임 소개에는 팀원들이 자유롭게 쓸 수 있게 마크다운을 활용하기로 했습니다.

내용에 마크다운 문법을 적용하기 위해 marked.js를 사용했습니다.

또 첫 화면에는 게임의 목록을 받아 한장 씩 변하는 형태로 구성했습니다.

게임 목록과 팀원 목록이다

팀원 목록 디자인 컨셉

게임 소개 페이지 컨셉과 마크다운 스타일시트(CSS) 테스트

RSS피드와 팀원 목록 표시 정리 (3 / 26)

팀원 목록이 왼쪽으로 치우쳐있을 때, 크기를 줄이니 공백이 꽤 많이 생겨서

가운데로 정렬하기로 했습니다.

또, 팀원 소개 페이지를 정리하고 만들었습니다.

이거 결정하는 데 꽤 오래 걸렸네요.

가운데 정렬!

게임 소개 페이지에 마크다운에 약간 부가적인 요소를 더한 모습

팀원 정보 페이지 초안

두번째 초안

완성한 모습

플래시였던 게임들을 직접 즐길 수 있게 만들기 (3 / 30)

마지막으로 홈페이지를 검토하는 과정에서, 플래시 플랫폼에 대한 하이퍼링크가 허전한 감이 없지 않아 있었습니다.

그래서 2020년이 되기 전 까지 이용할 수 있게 새로운 페이지를 추가했습니다.

플래시 전용 페이지, 가로 크기가 작으면 볼 수 없게 된다.

4월 1일이 되고...

지금까지 홈페이지 개발에 꽤 많은 공을 들였던 것 같습니다.

IE랑 겨루기도 하고, 사파리가 검은색으로 번졌던 많은 문제가 있었지만, 팀원과 함께 버그를 수정하고 만들어 갔습니다.

284커밋

본격적인 부분

사실 이번에 플래시 페이지를 만들고 올리는 과정에서, 2014년에 완성한 플래시 게임인 백색영혼에 많은 하자를 발견했습니다.

로고도 수정할 겸, 맵의 구조나 디자인을 약간씩 개선했죠.

이럼에도 해결이 안 될 부분은 무리였지만...

동시에, 게임 소개를 작성하기 위해, 몇가지 사진을 지금 와서 다시 그렸습니다.

4년 전과는 꽤 동떨어진 분위기로 뭔가... 사기를 치는 느낌이네요(...)

여기서 마치며...

https://youtu.be/5vg2bzNzvbw

이제부터 다시 만들고 있는 현재의 백색영혼에 다시 집중하려고 합니다.

지금까지 아쉬운 모습으로만 보여드려서 죄송하다고 느끼고 있습니다ㅠ

지난 개발일지를 작성한 이후, 꽤 아쉬움이 남아 약 2시간을 들여 간단한 애니메이션을 연습했습니다.

컨셉 아트의 스타일로요!

왼쪽이 컨셉, 오른쪽은 똑같은 아트 스타일을 적용한 애니메이션

이제부터 다시 본진으로 돌아와 개발을 열심히 진행하려고 합니다.

이번이 게임을 만든 과정은 아니였지만, 그럼에도 여기까지 읽어주셨다면 감사를 드리고 싶네요.

저희 홈페이지의 주소는 http://creffect.com/ 입니다.

홈페이지에서 플래시 게임(백색영혼, Line)도 해보실 수 있으니

심심하시면 한 번 들어와서 플레이 해보세요.

 

그러면 다음 주부터 본격적으로 돌아오겠습니다!

지금 다시 만드는 백색영혼의 2014년에 만들어진 옛 버전을 플레이 하시려면, 아래의 링크로 들어와서 플레이 하실 수 있습니다.

4년 전에 만든 게임이라, 꽤 허접한 게임이죠...

그래서 다시 준비하고 만드는 게 지금의 제가 쓰고 있는 개발일지의 새 게임입니다.

http://creffect.com/flashpage.html?id=colorlessspirit

[익명(211.224)]

진짜졸라멋져요 힘내시고 많이 발전해주세요

[WAFFLE(wrt0302)]

아조시 며칠간 IE땜에 개고생하더니 드디어 결실을 맻었군 ㅊㅊ

[익명(117.111)]

걍 xe로 하시지. - dc App