Goose APP - First Gallery

Develop Extra

Goose APP - First Gallery

first-gallery-000.jpg

Design

기획은 대략적으로 상상력으로 끝내버렸고 곧바로 디자인작업을 시작하게 되었다.

first-gallery-001.jpg

디자인은 개인홈페이지에서 사용하는것을 그대로 사용하기 힘들어서 좀더 쉬운 형태로 다시 디자인을 만들게 되었다.
상단 바는 로고와 메뉴가 들어가고, 중간은 내용이 들어가게 된다. 테마컬러는 무난한 블랙계통으로 가버렸다.

first-gallery-002.jpg

상세페이지는 디자인에 이런저런 고민이 많았다.
본문페이지에서 닫기로 마지막에 봤던 화면에 유지하기 위하여 목록에서 이미지를 선택하면 페이지가 이동되는게 아니라 팝업으로 본문내용이 출력되고, 닫기 버튼으로 팝업이 닫히는 방식으로 구성할 계획이다.

first-gallery-003.jpg

어짜피 디자인 자체가 단순하다보니 모바일 사이즈로 변형시켜도 무리가 없는 형태였다.
사이즈가 작은 모바일 디바이스는 공간을 절약하기 위하여 아이콘을 부각시켰다.

PC버전과 모바일버전 디자인을 만들었다.
이렇게 디자인을 만들었지만 직접 코딩해보니 현실적으로 차이가 나는 것들이 있어서 개발작업에서 형태가 조금 바뀌게 되었다.

Develop

디자인작업을 끝내고나서 바로 개발작업에 들어가게 되었다.

당시에 사용하기 시작하는 javascript 프레임웍인 react.js를 사용하기 시작하여 react.js로 개발해야겠다고 마음먹고 있어서 react.js베이스로 작업을 시작하였다. 하지만 아무래도 디테일한 dom 컨트롤이나 애니메이션 작업, 일부 이벤트에서 익숙한 jQuery의 도움을 받게 되었다.

대부분의 작업은 javascript에서 이루어지다보니 먼저 goose의 데이터를 통신하는 api작업부터 하게 되었다.
ClientAPI 클래스 (https://github.com/dev-goose/app-first-gallery/blob/master/lib/ClientAPI.class.php)부터 작업을 했는데 최대한 많은 상황들을 염두해서 데이터를 요청하고 받아오는 컨셉으로 만들었다. 그리고 ajax 처리를 위하여 각각의 url을 입력하면 json데이터로 출력하는 역할을 하는 파일을 만들었다.

react.js 베이스로 스크립트 작업을 시작하여 우여곡절 끝에 다 만들기는 했지만 seo(검색엔진최적화)에는 대책이 없는것을 알게되었다. php로 react.js코드를 해석해서 렌더하는 방법도 있고하지만 서버세팅을 해야한다는 제약사항이나 node.js를 병행해서 개발해야한다는 글들을 보니 고민하다가 react.js로 개발하는것을 포기하게 되었다.

ClintAPI 클래스를 제외한 파일들을 전부 삭제하고 새로 만들었다.

first-gallery-004.jpg

url처리와 js와 php에서 출력의 통일, 부드러운 화면의 전환에 많은 신경을 썼다. 목록에서 글을 선택하면 js로 출력하지만 url로 접근하면 php로 출력하는 방식에서 좀 애를 먹은거 같다.
react.js로 개발하는것보다 많이 수월하게 개발했고, 코드도 더 심플하게 작성하게 된거같다. 쓰디쓴 실패를 겪어서 그런것일지도..

오픈소스로 공개를 해야하는 앱이라서 다른사람들이 이해할 수 있는지에 대한 불안감이 가장컷고, 쉽게 활용할 수 있도록 문서작업도 많은 신경을 썼다.

End

공개하는 용도로 만든 첫 앱이다보니 시간이 굉장히 많이 걸렸다. 어떤것이든 처음이 가장 어렵고 시간이 많이 걸리는것이니..
이런것도 만들면서 느끼는것이지만 뭔가 더 화려해지고, 기능이 더 많아지면 그만큼 더 복잡해지는것이고 활용하는 난이도가 더 올라가는것 같다.

디자인부터 개발까지 많은 시간이 걸렸지만 이렇게 올리고 남들에게 공개하고, 반응을 보니 보람이 생긴다.
시간만 더 있었으면 이런 앱이나 관리도구 프로그램을 더 많이 만들고 싶긴하다.