소프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 정적 타입, 리액트, 뷰, 앵귤러, 일렉트론, ESNext 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]
필자는 평범한 공대생이었다. 신물질을 합성해 수득률을 계산하고, 암세포에 주입해 치사율이 얼마나 높은지 분석하는 일이 주 업무였다. 그런데 지금은 코드에 브레이크 포인트를 찍어가며 디버깅하고, 로그를 프린트하며 개발한다. 프로그래밍 언어도, 개발 툴도 아무것도 모르던 필자가 iOS 모바일 개발을 하고 있다. 필자가 개발자가 된 이야기는 훌쩍 떠났던 여행으로부터 시작됐다.
100일간 여행하며 찍은 사진은 스마트폰에 무섭게 쌓였다. 하지만 도무지 정리할 엄두가 나지 않았다. 분명 잊지 못할 장소와 아름다운 기억인데, 시간이 지나면 내가 간 곳이 어딘지, 어떤 경로로 다녔는지 기억에서 희미해지는 게 너무 아쉬웠다. 스마트폰에 잔뜩 쌓여있는 사진으로 나의 소중한 여행을 간직할 수 있다면 얼마나 좋을까? 아무리 찾아봤지만 내가 원하는 기능을 만족하는 앱을 찾을 수 없었다. 결국 나는 내게 필요한 앱을 직접 만들기 위해 iOS 개발을 배우기로 했다. 안드로이드가 아닌 iOS인 이유는 내가 오랜 iOS 사용자이기 때문, 별다른 이유는 없다.
2년 전, 학원에서 iOS 3개월 과정을 시작했다. 아침 9시부터 막차 시간까지 쉼 없이 공부했다. 온통 낯선 컴퓨터 용어와 iOS 아키텍처를 이해하기 위해 24시간이 부족한 느낌이었다. 내가 이렇게 공부한 적이 있었나 하는 생각이 들었다. 학원에서 보내는 시간이 길어지는 만큼 동기들과 친해졌고, 과정 수료 후 동기들과 팀을 이뤄 여행 앱을 구체화했다. 다섯 명이 천천히 함께 만들어낸 여행 앱이 maptales(맵테일스)다.
그렇게 혼자만의 개발 욕심을 키우고 있을 찰나, 좋은 기회가 생겼다. Blink라는 메모 앱 개발을 혼자 맡게 된 것이다! 개발을 시작한 지 1년 만에 혼자 앱을 만들게 됐다.
멀지 않은 과거, 우리 손에는 작은 수첩과 펜이 있었다. 지금은 그 자리를 스마트 폰이 차지해 많은 기능으로 사용자의 마음을 훔쳤다. 하지만 정작 필요한 기능을 사용하지 못할 때가 있다. Todo 앱이 특히 그랬다. 옛날처럼 종이 한 장과 펜 하나만 있으면 되는데, 서버 연동, 기간 설정, 카테고리 입력, 태그 등의 기능이 필자를 메모 앱에서 멀어지게 했다. 그 때문에 스마트폰을 손에 쥔 지 6년간 어떤 Todo&메모 앱에도 정착하지 못했다.
메모 앱 Blink 기획을 듣자마자 마음에 들었다. 지금까지의 Todo&메모 앱은 한 줄에 아이템 한 개가 들어가는 리스트 형식이다. Blink는 수첩에 메모하던 방식 그대로 한 줄에 아이템 여러 개를 적는 방식이다. 한 장의 종이 그리고 펜, 그 이상도 이하도 아닌 메모를 위한 메모 앱이다.
한 가지 문제가 있다면 메인 화면 레이아웃 구성이었다. 우리는 이 레이아웃을 Blink ‘엔진’이라 불렀다. 생각보다 만드는 데 꽤 오랜 시간이 걸렸다.
문제가 있었다. 한 줄에 여러 개의 아이템을 입력하고, 각 아이템을 독립적으로 관리(터치)해야 했다.
가장 먼저 생각난 방법은 ‘UILabel’ 쌓기다. ‘UILabel’를 박스로 생각하고, 각 ‘UILabel’에 아이템 하나를 담은 후 공간을 채워가는 방법이다. 각 ‘UILabel’에 ‘TapGesture’를 붙여 탭을 인식하고, 선택된 아이템을 관리하면 되겠다고 생각했다.
그런데 ‘UILabel’을 쌓으려 하니 새로운 메모가 추가될 때마다 각기 다른 너비의 ‘UILabel’을 계산하고 ‘UILabel’의 ‘Frame’을 매번 업데이트 해야 했다. 수십 개의 ‘UILabel’ 제스처를 관리할 생각만 해도 로드가 너무 컸다. ‘UILabel’을 ‘UIButton’으로 변경해도 상황은 마찬가지였다.
고민 끝에 생각한 방법은 ‘UICollectionViewController’다. ‘Custom Photo Album’을 구현할 때 공부한 ‘UIKit’의 그리드 형태 클래스. 그래, 내가 모든 ‘Label’의 프레임을 일일이 계산해서 뿌려주는 건 너무 힘들지만, 친절한 ‘UICollectionViewController’의 힘을 빌리면 되겠다. 아이템 추가도, 정렬도, 탭 관리도 훨씬 손쉽게 할 수 있겠다. 그렇게 나는 컬렉션 뷰와 친해졌다.
전미정 필자의 빠른 메모 앱 Blink 개발기에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.