[Toy Project] 항해 플러스 코육대

3시간 만에 앱 하나 뚝딱 만들기

참여 동기

소파에 누워서 휴대폰 하다가 광고가 뜬 걸 봤고, 연휴의 첫날 저녁 늦게 약속이 있었기에 4시간 이내에 만들 수 있겠다 싶어서 도전해봤다.

(정확히는 제한시간이 있어서 집중력을 극대화할 수 있을 것 같아 도전했다.)

이제 이 글을 빠르게 써서 코드와 함께 제출하고, 치맥하러 가면 된다(야호!).

기능 구현 사항

해당 프로젝트는 프론트앤드까지 구현해야 했기에 평소 애용하던 streamlit을 사용했다.

(AI개발자로서 가장 어려움을 겪는 부분 중 하나가 데모앱을 구현하는 것인데, 프론트앤드 인원에게 따로 부탁할 수 있을 정도로 인원적 여유가 있지 않다면 Streamlit이나 Gradio를 추천할만하며, 간단한 구조로 충분하다면 아직은 미완성 단계지만 깔끔한 Reflex(舊pynecone)나 flet도 괜찮은듯 하다)

내가 참여한 종목은 '세뱃돈 계산기'인데, 별 이유는 없고 첫 번째에 있어서 선택했다.

전체적인 UI

전체적인 UI는 아래와 같다.

APP UI

streamlit을 이용해 구현했으며, 세부적인 코드는 깃허브에 업로드해놓았으며, UI를 확인하려면 Streamlit 오픈 클라우드를 통해 배포한 여기로 들어가면 된다. Streamlit Cloud는 내가 Streamlit을 사용한 이유이기도한데, public으로 공개할 수 있는 페이지와 코드라면 streamlit cloud를 무료로 사용해 배포할 수 있다. 

전체적인 구조를 먼저 설명하자면, 최상단에는 타이틀과 코육대 공식 페이지에서 가져온 이미지가 배치돼있고, 가운데에는 계산기가, 하단에는 배너가 위치해있다.

상하단의 코육대 혹은 항해+ 이미지를 클릭하면 해당 페이지로 넘어가도록 했으며, 하단의 텍스트를 입력하면 내 깃허브로 이동하도록 해놓았다.

코육대 계산기 종목 제약사항

계산기 기능은 별다를게 없으며, 해당 종목의 제약사항을 충족시키는 선에서 몇 가지 기능을 추가했다.

(이 제약사항을 지키되 코드가 복잡하거나 더러워지지 않도록 구현하는 데 거의 대부분의 시간을 써야했다.)

첫 번째로는 0을 두 개씩 입력할 수 있는 기능이며, 나름 세뱃돈인만큼 몇 십원 혹은 몇 백원 단위로 받지는 않을 것이라는 현실적인 기대에서 추가했다.

두 번째로는 글자를 하나씩 지울 수 있는 기능인데, 긴 길이의 숫자를 한 글자씩 지울 수 있으면 좋겠다는 생각에서 추가했다.

Streamlit Detail

최근 회사에서도 streamlit이나 gradio를 활용해서 빠르게 UI를 구현하는 프로젝트를 진행 중인데, 진입장벽이 낮아 쉽게 도전할 수 있지만 제대로 쓰기엔 또 쉽지 않다.

그 중에서도 본 프로젝트에 적용된 유용한 기능은 아래와 같다.

1. 하단 배너

streamlit은 구현된 기능 외에도 자체적으로 유용한 기능을 추가할 수 있는데, 이들 중 유용하게 사용될만한 것들은 공식 홈페이지에서도 3rd party components라고 소개한다.

물론 이런 식으로 소개되지 않은 것들 중에서도 유용한 것들이 많으니, 만일 특별한 기능을 새로 구현하고 싶다면 사전에 충분한 리서치를 진행해보는 것이 좋다. streamlit float github는 여기를 참조.

2. 아이콘

본 프로젝트의 로고

내가 사용한 아이콘은 위의 이미지인데, 최근 유행하는 google의 emoji kitchen을 통해 만들었다.

emoji kitchen은 기존에 존재하던 이모티콘 두 개를 합쳐 새로운 이모지 이미지를 만드는 방식인데, 본래 계산기 앱인만큼 계산기 이모지를 사용하고 싶었지만 존재하지 않아 적당히 숫자가 들어간 걸로 만들었다.

emoji kitchen

이처럼 배경이 없는 png 이미지를 다운받고, 확장자를 .ico로 바꿔준다.

이후 이를 프로젝트 경로에 넣어주고, 아래와 같이 PIL 라이브러리의 Image.open 기능으로 열어서 본인의 프로젝트 아이콘으로 사용할 수 있다.

title과 icon 등을 세팅

3.기타

막상 구현해놓고 보니 너무 밋밋한 계산기가 돼버린 것 같아, 참여한 항해+ 페이지를 둘러보다가 예시로 보여주는 계산기 속 숫자가 99이고, 좀 더 알아보니 항해+가 항해99의 자회사? 프로젝트 팀? 인거 같아 본 계산기로 99가 출력되도록 하면 풍선이 올라오도록 했다.

나름의 이스터에그

원래는 99라는 붉은 숫자가 풍선대신 올라오도록 하고 싶었는데, 약속시간이 다가와 제한시간 안에 마무리하려다보니 풍선 정도로 마무리했다.

참여소감

연휴의 시작을 생산적인 일로 했다는 게 만족스럽다.

특히 제한된 시간 안에 만드는 행위 자체가 어느정도의 긴장감과 함께 집중력을 올려주기도 하고, 항해+가 개발자를 교육하는 기업 소속인만큼 이런 프로젝트 자체가 신입 개발자들이 자신들의 능력을 빠르게 보여주면서 성장할 수 있는데 조금이라도 도움이 되었으면 좋겠다.