2015년 9월 8일

hipstoon.com

힙스툰은 웹툰을 많이보는 여자친구가 이야기했던 내용을 바탕으로 만들게 되었다. 불편한 점, 필요한 기능 많이 이야기했는데 첫 버전은 아주 단순하게 웹툰 보면서 댓글 다는 크롬 확장기능과 최근 본 웹툰 기록, 자유게시판 이거 세가지 기능만 구현했다.

힙스툰 (웹툰을 볼 때 자동으로 열린다. 옵션에서 자동 열림을 끌 수도 있다.)

크롬 확장기능이 댓글을 저장하는 Meteor 서버와 통신하기 위해 Asteroid라는 라이브러리를 사용했는데 어떤 자바스크립트 앱에서도 Meteor 서버와 ddp(Meteor 데이터 프로토콜) 연결을 도와주는 편리한 도구다. 크롬 확장기능을 위한 안내도 있어 쉽게 사용할 수 있다.

hipstoon.com헬조선 뉴스 소스에 기반을 두고있다. 앞으로도 헬조선뉴스는 다른 앱을 만들때 밑바탕이 될 수 있도록 꾸준히 유지보수 할 계획이다.

마지막으로 소개할 도구는 Yeoman - 크롬 확장기능 생성기이다. Yeoman을 웹개발을 쉽게 만들어주는 보조 도구인데 크롬 확장기능을 만들 때 필요한 파일과 설정을 알아서 해주고 다 만든다음엔 grunt로 test, build까지 해준다.

주말 벌초 일정으로 많은 테스트를 못해보고 공개하게 되었는데 분명히 치명적인 문제가 숨어있을거라 생각한다. 버그신고는 yourfriends@hipstoon.com

로고는 여자친구가 잠시 임시보호했던 고양이를 보고 내가 그린 것이다.

바둑이

2015년 8월 14일

새 프로젝트를 준비하면서 구글이 정식으로 발표한 Material Design Lite (이하 MDL)를 테스트해보고 Meteor 앱을 만들때 사용할 초기 템플렛을 만들어 볼 생각으로 작은 앱을 생각해봤는데 그 중 적당하다고 생각한 것이 한국의 비이성적인 뉴스들을 보으는 헬조선뉴스였다.

MDL에서 자바스크립트를 이용한 기능들은 Meteor + Iron Router에서 버그가 있다. 그걸 처리하기 위해 패치된 버전이 있지만 그것도 완전하지 않아서 화면이 render 될 때마다 MDL 라이브러리를 깨워주는(?) 코드를 한 줄 넣은게 마음에 걸린다. 업데이트 안된지 오래된 Iron Router에 대해 말이 많지만 제작자가 Meteor 개발팀과 뭔가 협업 중이라는 을 믿고 채택했다.

레이아웃은 기본적으로 flexbox를 사용하기로했다. 비록 -webkit-, -moz-, -ms- 같은 Vendor Prefix 때문에 LESS mixin을 써야하지만 그 간편함과 강력한 성능은 너무 사랑스럽다.

싱글 페이지 애플리케이션 형태인 Meteor에서 글 목록을 무한 스크롤 방식으로 보여줄 땐 다른 페이지에 갔다 오게 되면 글목록 위치와 개수가 초기화 되도록 만드는게 보통이었는데 이번에는 SubsManager라는 패키지를 활용해 사용자가 읽고 있던 글 목록의 개수와 스크롤 위치를 저장하도록 했다. 아직 특별한 부작용은 없다.

링크 콘텐츠 미리보기 기능은 Embedly Card를 이용해 만들었다. embedly 외부 라이브러리가 link를 카드 모양으로 바꿔주는 방식인데 국내 사이트도 꽤 잘 동작하는 편이라 감사한 마음으로 적용했다.

간략하게(=불친절하게)나마 생각나는 주요 개발 내용을 적어보았다. 1년도 넘은 지난 포스팅에서 마지막 내용이 meteor.js 공부를 시작했다는 내용이었는데 감회가 새롭다.

2014년 3월 4일 - 지하철 6호선

1월 31일에 처음 제출하고 심사 들어가기전에 몇번 다시 올리고 리젝 한 번 당하니까 벌써 날짜가 이렇게 됐다. 솔직히 새로 작업하는 앱에서 구현이 막막할 때 Listener 새 기능을 추가한건데 다 끝내고 심사 기다리는 중에도 새 앱에 손이 잘 안가더라

업데이트 내역

  1. 무료화: 사실 타겟을 나누고 유료/무료 버전을 따로 심사받았는데 무료 버전이 몇 번 리젝 당해서(같은 앱인데;;) 아예 유료앱을 무료화하고 광고를 올렸다.
  2. 푸시 추가: parse.com의 놀랍도록 쉬운 푸시 지원 덕분에 빨리 끝냈다. 하지만 문제는 복잡한 xcode 인증서. 테스트는 다 했지만 앱도 두개라서 뭔가 꼬였을까 걱정이다.
  3. 글 올리기 제한: 도배를 막는 완벽한 방법은 아니지만 한 번 글을 올리면 5분동안 글쓰기 버튼대신 5분짜리 카운터가 나오게 된다.
  4. 신고기능 추가: 지난번 리젝 사유가 익명 사용자들이 음란한 글을 올린다는 내용이었는데 재심사 신청할때 이 앱은 채팅처럼 말을 주고받는게 안되고, 모두 자동으로 아이디가 생성되며, 두 번의 신고를 당하면 글이 사라진다고 설명했다. 사용 등급도 17+로 올림

itunes 심사 과정은 정말 애가 탄다. 사람이 하는 일이라 이상한 리젝 사유도 꽤 있지만 꼼꼼한 심사로 막장 앱들이 많이 걸러지기 때문에 그려려니 하고 리뷰어가 요청한 대로 해주는 편이다. 휴..

추가: 기다리다 지쳐서 meteor.js라는 플랫폼을 공부해봤다. hara9.com

2014년 1월 1일 - 안양

닌텐도 코리아 몬스터헌터4

몬스터헌터4 현재까지 124시간 플레이. 이 시리즈는 처음이지만 이제 어느정도 감을 잡았다. 솔직히 이 게임은 하드코어 게임에 속한다. 그래서 게임을 좋아하는 사람들에게도 쉽게 추천해 줄 수 없다. 정확히 구분하자면 비추천 쪽에 더 가깝다.

  1. 일본 게임 특유의 노가다 플레이가 이 게임의 핵심 재미요소이다: 완전히 똑같은 플레이를 반복하지 않는 게 그나마 다행이다. WOW 공격대처럼 몬스터별로 아이템 테이블이 있고 장비가 여러 단계로 나뉘어 있어서 목표가 확실하다. 다만 이런 성취감을 느껴본 적이 없거나 아이템을 얻기 위한 고생스러운 여정이 취향에 안맞는 사람이 더 많기 때문에 단점이라고 볼 수 있다.
  2. 조작이 어렵다: 몬스터헌터는 하드코어한 게임임에도 휴대용 게임기가 잘 어울리는 장르라서 이런 문제점이 따라온다. 게다가 마리오 하라고 만든 직사각형의 무거운 게임기를 들고 모든 버튼을 이용해 장시간 몬스터를 잡는 일은 매우 피곤하다. 이런 육체적 고통까지 즐기는 사람은 본인이 변태임을 인정해야한다.

하지만 몬스터헌터4는 2013년에 내가 해 본 게임 중에 두 번째로 잘 만든 게임이다. (첫 번째는 바이오쇼크 인피니트) 하드코어하지만 그 방향이 명확하기 때문이다. 나는 이 게임이 처음인데도 오랜 기간동안 다듬어진 사냥을 도와주는 기능들 덕분에 노가다 플레이의 불편함이 많이 줄었다. (아이템 대량구매, 대량 조합, 멀티플레이 등) 다양한 몬스터의 디자인이나 공격 패턴 등은 일류급이다.

결론은 일단 비추지만 헌팅액션 장르의 진수에 도전해보고 싶다면 말리지 않겠다. 취향에만 맞으면 100시간은 순식간에 지나간다. 3월에 나올 디아블로3 확장팩이 몬스터헌터처럼 확실한 비전을 가지고 만든 게임이면 좋겠다.

2013년 11월 14일 - 안양

개발

8월 23일 시작했으니 3달 정도 걸렸다. 몇 해 전부터 아이폰 앱을 만들어 보겠다고 말만 하다가 여름에 아이폰 개발자 등록(11만 원)을 했고 등록비도 아까운데다 사람들에게 공표해놓은 것도 있어서 만들 수밖에 없었다.

몇 년 전에 적어놓은 첫 아이디어 이름은 “비밀 저장소”였다. 내 비밀을 올리고 금방 폭파되는 그런 게시판이었다. 그땐 메시지를 익명으로 올리면 5분, 10분 후에 사라지는 걸로 생각을 했다. 그런데 생각해보니 아무도 읽지 않았는데 시간이 다 돼서 사라진다면 딱히 특별할 게 없는 것 같았다. 그래서 바꾼 것이 조회수가 10, 100, 1000이 되면 글이 사라지는 게시판이었다. 결국엔 10번 읽으면 사라지는 걸로 결정을 했는데 이용할 사람이 그다지 많지 않을 것이고 선택을 하는 단계가 추가되는 게 맘에 들지 않았기 때문이다.

아이폰 개발에 대해서 아무것도 모르는 상황에서 일단 개발자 등록을 했다. 아이폰 5s와 iOS 7이 나오기 직전이라 빨리 등록해서 iOS 7 전용 앱으로 만들면 되겠다고 생각했다. 역시 계획대로는 되지 않았다. 중간에 메시지 오가는 부분에선 지루해서 한동안 코딩하는 재미가 없었고 브레이킹 배드 마지막 시즌도 겹쳐서 그거 보느라 정말 하기 싫을 때가 있었다. 그래도 사람들에게 말해놓은 것도 있고 아무리 바빠도 하루 한 줄 이상 코드를 짜자는 결심을 했기 때문에 결국 완성할 수 있었다.

기능

굉장히 간단한 앱이고 대부분 내장 UI와 아이콘을 쓰기 때문에 앱 용량도 600kb 정도밖에 안된다. 애초에 복잡한 부분은 따로 설명해도 잘 안 읽을 것 같아서 앱스토어 설명에서 빼놓은 것들이 있다. 리스너는 4개의 탭으로 되어있다.

  1. home: 다른 사람들이 쓴 글을 볼 수 있고 설정에서 Worldwide(모든 글)나 특정 언어군(글쓴이의 아이폰 언어 설정으로 판단)의 글만 골라볼 수 있다. 그리고 여기서 글쓰기와 다른 사람 글에 댓글을 쓸 수 있다. (500자)

  2. Comment: 내 글에 달린 댓글을 볼 수 있다. 읽지 않은 댓글 숫자를 배지로 표시해준다.

  3. Sent: 내가 쓴 글 목록. 리스너에서는 iOS 7에서 권장하는 기기 식별 아이디를 저장하는데 앱을 삭제하고 새로 설치하면 그 아이디가 바뀐다. 따로 아이디를 만들어 저장시킬까 하다가 단순하게 가는 게 낫겠다고 결정했다. 그리고 왼쪽으로 글 제목을 슥 밀면 삭제 버튼이 뜬다.

  4. Setting: 간단한 부분인데 브레이킹 배드도 봐야 하고 마무리 슬럼프에도 빠져서 제일 오래 걸렸다. Setting.Bundle을 이용해서 타임라인에 출력될 언어를 설정할 수 있다. 아이폰에 설정되어있는 언어를 기준으로 판단하기 때문에 히브리어로 아이폰 설정해놓고 한국어로 쓰면 히브리어 쪽에 저장된다.

보람

크게 마케팅 할 생각도 없고 그럴 돈이나 시간도 없어서 아침에 페이스북과 트위터만 올렸는데 오후에 보니 소셜네트워킹 카테고리 유료앱 2위가 되어있었다. 내가 존경하는 tweetbot 다음이라 감격했다. 한국 스토어에 유료앱이 별로 없어서 그런 거라고 생각하지만 정말 영광스런 순간이 아닐 수 없다.

그리고 제일 반가웠던 반응은 앱스토어 스크린샷에 있는 daft punk 노래 가사를 알아본 사람의 댓글이었다. ㅋㅋ

앱을 유료로 한 이유는 별거 없다. 일단 개발자 등록비가 11만원이나 하고 앱 자체가 인터넷 기반이기 때문에 서버(구글 클라우드) 비용이 나갈 수도 있어서다. 두 번째 이유는 어느 정도 진입 장벽이 있어야 장난 글이 넘치는 걸 줄일 수 있다고 생각했다. 마지막으로 재미를 위해 만든 것이 유료앱으로 낼 수 있는 가장 큰 이유였다.

격려 말씀해주신 분들, 앱을 받아주신 분들 덕분에 오랜만에 새롭고 즐거운 경험이 되었다.

(여기까지 읽어주신 분들 중에 이메일 주소 댓글로 적어주시는 선착순 다섯 분께 리딤코드를 보내드리도록 하겠습니다. 고맙습니다.)