어떤 툴로 뭐부터 만들지?
- 문과생의 스마트빌딩 만들기 (5) -
각종 정리가 끝나고 본격적으로 실행에 도입해야 할 때가 왔다. 문과생의 스마트빌딩 만들기 (2) 편에서 설명했듯이, 앱 개발 및 구현을 위해 안드로이드 스튜디오를 사용하기로 했다. 안드로이드 스튜디오란 구글에서 제공하는 모바일 운영체제 안드로이드를 개발할 수 있는 개발환경(IDE)이다.
어플을 만들 수 있는 툴(tool)과 개발환경(IDE)은 많지만 안드로이드 스튜디오는 특별한 점이 있는데, 바로 협력이 가능하다는 점이다. 우리 팀 같은 경우 앱 파트(APP Part)를 맡은 사람이 2명이었다. 개발자와 디자이너. 개발을 모르는 디자이너와, 디자인을 하지 않는 개발자가 한 화면을 구현하는데 대화가 수월하게 될까? 경력자라면 비교적 수월하겠지만, 이번에 처음 맞춰보는 쪼렙 디자이너는 너무나도 먼 이야기이다.
하지만 안드로이드 스튜디오는 화면을 구성하면 자동으로 코드가 작성되고, 코드를 작성하면 자동으로 화면이 구성되는 특별한 기능이 있다. 개발을 모르는 나는, 내가 생각한대로 화면을 구성하고, 개발자는 화면의 코드를 참고해서 추가 기능 및 다른 화면을 개발할 수 있는 것이다.
그러나 내 노트북에는 깔리지 않았다.
조금 더 직설적으로 표현하자면,
안드로이드 스튜디오를 토해냈다.
안드로이드 스튜디오를 깔기 일보 직전이었던 나의 노트북은, 15년도에 구입한, 삼성의 아티브북9 lite 13인치 노트북이었다. i3의 CPU, 8GB의 RAM, 128GB의 SSD, 1.44KG의 무게라는 스펙을 갖고 있었는데, 지금 보기에는 스펙이 정말 비루하기 짝이 없겠지만 사실 그때도 막 엄청난 스펙은 아니였다. (내 생각이지만) 삼성의 엄청난 마케팅 전략이 부족한 스펙을 감추게 해주지 않았나 싶다. 삼성은 타겟팅을 '노트북을 잘 모르는 20대 초반의 여대생'으로 목표로 삼았는데, 색상을 화이트, 핑크, 라임으로 출시하거나 드라마 '별보다 그대'에 협찬하는 등 계속해서 나를 비롯해 내 주변 여자친구들의 눈에 띄게 했다. 그 결과 나와 내 친구들은 같은 노트북을 구매하게 된다. 하하.
2-3년 잘 써오다가 가장 큰 문제에 봉착하게 되는데, 그게 안드로이드 스튜디오 설치였다. 안드로이드 스튜디오 공식홈페이지에 나와 있듯이 굉장히 무거운 프로그램이었다. 다운로드하는 데만 1GB, 디스크에 최소 2GB... 그니까 설치에만 일단 3GB가 필요하다는 것이다. 3GB이면 일단 깔만하겠는걸? 이라는 마음으로 설치를 시작한 후, 주변에게 물어보니 적어놓기만 그렇지, 실제로는 기본 15GB라고 하는 말을 듣고 설치 후에 바로 삭제해야겠다는 생각을 했다.
응... 15GB... 다음에나 깔아야지 설치하자마자 디스크가 꽉 찼으니 어서 지우라는 무시무시한 알람이 떴고
나는 안드로이드 설치 완료 창과 셀카를 찍은 후
삭제를 했다.
설치하자마자 지웠다고? 하긴 그 노트북은... 크흠.. 그럼 너는 디자인만 집중하자. 약간 (아니 매우 엄청난!) 막노동이 눈앞에 선하지만, 네가 디자인 시안을 주면 내가 그걸 참고해서 안드로이드 스튜디오에서 개발해볼게.
이제는 디자인에만 집중된 툴을 찾아야 했다.
작년에 퍼듀 캡스톤 디자인 프로젝트를 했던 학교 선배에게 Micro Soft에서 만든 'Power Mockup' 추천을 받았다. https://www.powermockup.com/
기존 PowerPoint에 추가로 기능이 설치되는 개념으로, 용량도 크지 않으며 무엇보다 유료서비스이지만 블로그에 게시하면 무료 라이센스를 준다는 점이 매력적이다.
네이버 블로그에 게시해서 무료 라이센스를 얻었더랬다정말 많은 아이콘들이 있다는 점, 무료라는 점, powerpoint에 추가된 기능이기 때문에 낯설지가 않다는 점 등이 장점이지만 내게는 예전에 사용해본 카카오에서 만든 프로토타입 툴인 오븐(Oven)과 비슷하다는 점, PowerPoint랑 너무 친해서 새로운 것을 경험해보고 싶다는 점에서 다른 툴을 찾게 되었다.
그러다가 찾아낸 게 프로토파이(ProtoPie)였다. https://www.protopie.io/
프로토파이는 또 무엇일까. 웹(혹은 앱)에서 프로토타입(시제품)을 만들 수 있도록 도와주는 UX 전문 툴로, 구글 디자이너였던 스튜디오시드(studioXID) 대표인 김수 대표가 만든 서비스이다. 프로토파이의 이름 뜻은 'prototype + a piece of pie(식은 죽 먹기) = ProtoPie'로, '프로토타이핑은 파이를 만드는 것처럼 쉽고 맛있어야 한다.'라는 정신으로 만든 툴이라고 볼 수 있다. 가장 큰 특징으로는 안드로이드 스튜디오와 달리, 코드 프리(code free)이다. 코드 없이 화면 구성, 애니메이션 등이 가능하다.
프로토파이에서 가장 강조하는 코드 프리(Code Free) (출처 : 프로토파이 홈페이지)- 프로토파이 툴을 설치하기 전에, 이게 나와 맞는 프로그램인지 찾아보던 중 내게 큰 힘이 되었던 글을 공유한다.
- 프로토파이를 만든 김수 대표의 인터뷰가 있는 브런치 글도 함께 공유한다.
자, 뭔가 괜찮은 걸? 회원가입부터 하고, 10 DAYS Free Trial를 다운로드한 후, 첫 화면을 연 순간. 텅 빈 화면을 보고 고민을 한다.
뭐..부터 만들지?
음... 정체성부터 만들까? 앱 로고부터 정하면 길이 보일 거야.
팀 로고를 만들듯이 앱의 정체성을 부여하기 위해 로고부터 제작하기로 했다.
스마트빌딩하면 생각나는 이미지는 뭔가 자동화, 재생에너지, 자연친화적이 생각났다. 자연스레 초록색, 짙은 녹색 계열이 떠올랐고 색을 추출하기 위해 여러 사이트를 찾아보았다.
다음은 내가 메인, 보조 색상을 고르는 데에 참고한 사이트들이다.
http://jxnblk.com/hello-color/?c=40899a
우리가 제어할 공간인 케이스퀘어(K-Squre)를 우리끼리 짧게 크스크라고 부르곤 했는데, 거기서 착안해낸 로고이다.
크스크의 자음인 ㅋㅅㅋ(키읔 시옷 키읔)을 뽑아낸다
맨 앞 ㅋ(키읔)을 뒤집어 3개의 자음을 모아서 건물 형태를 나타낸다
건물 형태가 되었을때, 건물임을 확실히 보여주기 위해 노란색 빛을 추가한다
sandoll의 인디언소녀 01 basic 글씨체로 케이스퀘어의 로고를 만들었고
sandoll의 크림빵 글씨체로 동영상의 '케이스퀘어'를 표현했고
RGB #528233 으로 메인 색상을 맞췄다.
어느덧 10월이 끝났다. 뼈대를 갖추고 이제 차곡차곡 살을 붙이고 있는 과정이 시작되었다. 팀원 각자가 맡은 센서를 앱에 예쁘게, 잘 담아내는 일이라는 생각에 더욱 사명감! 책임감!으로 프로젝트에 집중하는 11월이 시작된 것이다.
