세상엔 정답이 없는 일이 너무 많아요. 마케팅도 마찬가지죠. 고객을 이해하고 그들에게 필요한 걸 전달하는 일은 무궁무진하니까요. 저는 로우코드 앱 개발 도구 ‘플렉스튜디오’에 합류한 지 4개월이 지난 마케터 ‘썬’이에요. 정답이 없는 마케팅을 잘하기 위해 앱 개발까지 하게 되었어요. 처음으로 만든 앱 ‘ 개발자 밈 이상형 월드컵’을 소개하고 제작 과정에서 배운 소소한 팁을 설명할게요.
입사 후 제가 본격적으로 담당하게 된 첫 업무는 앱 개발 공모전이었어요. ‘상상은 크게, 개발은 빠르게! 로우코드 앱 개발 공모전’은 누군가의 일상을 편리하게 만드는 앱을 플렉스튜디오로 개발하는 공모전이에요.
공모전을 홍보할 수 있는 방법은 다양해요. 인스타그램, 유튜브 같은 소셜미디어부터 웹사이트의 배너 광고, 뉴스레터 형식까지 수많은 방법이 있어요. 여러 방법을 고민하던 중 크게 두 가지 생각이 떠올라 앱을 제작하게 되었어요.
그렇게 ‘개발자 밈 이상형 월드컵’이라는 앱을 기획했어요. 앱 이름 그대로 개발자들이 공감할만할 밈을 토너먼트 형태로 선택하는 간단한 게임이에요.
처음 기획은 낙서처럼 화면의 흐름과 원하는 모습을 그렸는데요. 기획을 할 때 가장 중요하게 생각한 부분은 핵심 기능이었어요. 경험이 많거나 실력이 뛰어난 제작자가 아니기 때문에 핵심 기능 하나가 제대로 작동하도록 만들고 그 외의 요소는 모두 덜어내려고 했어요. ‘개발자 밈 이상형 월드컵’의 핵심 기능은 여러 개의 이미지를 토너먼트 형태로 선택하며 마지막 남은 이미지를 표시하는 거예요. 처음 기획안과 완성된 앱을 비교하면 많은 부분이 달라졌지만, 핵심 기능은 변하지 않았어요.
필요한 기능에 집중한 기획처럼 디자인도 최대한 단순하게 구상했어요. 밈이라는 콘텐츠에 집중하기 위해서 텍스트나 다른 요소들은 최소한의 정보를 전달하도록 만들었죠. 얼핏 보면 디자인이 되지 않은 듯한 흰 바탕에 검은 글씨의 앱이 나오게 된 이유예요.
첫 화면의 이미지는 밈이라는 단어의 느낌을 살려 골랐어요. 선으로 표현한 컴퓨터 일러스트는 가공되지 않는 유머와 이미지에서 오는 특유의 날 것 같은 분위기를 살리고 싶었거든요.
컨셉은 멋지게 설명했지만, 디자인을 구현하는 과정에서 어려움이 있었어요. 아름다움의 문제가 아니라 버튼이 정말 버튼처럼 보이는지, 글자 크기나 간격은 어떻게 설정해야 할지 등의 고민인데요. 팀 플렉스튜디오의 디자이너분들에게 질문을 하고 조언을 구하며 조금 더 완성도 높은 앱을 만들었어요.
플렉스튜디오는 다양한 기기에 반응형 앱을 구현하기 위해 CSS(Cascading Style Sheets) 개념을 활용해요. 처음엔 CSS의 개념이 낯설어서 직접 해보며 방법을 익혔는데요. 아무 속성도 변경하지 않고 이미지 크기를 수정했는데, 이미지 정렬이 왼쪽으로 치우쳤어요. 플렉스튜디오 디스플레이 속성은 그룹(Group) 또는 레이아웃(Layout)에 추가하는 하위 컴포넌트의 배치 방식을 설정해요.
마진 값을 일부 수정했어요. CSS의 마진은 요소의 외부 여백을 설정하는 속성으로, 다른 요소와의 간격을 조정하는 데 사용돼요. 각 방향(위, 아래, 왼쪽, 오른쪽)에 대해 개별적으로 또는 일괄적으로 값을 지정할 수 있어요. 각각의 컨트롤에 마진 값을 주는 것보다 레이아웃이나 그룹 단위로 주는 것이 좋다는 사실을 알게 되었어요.
개발을 바로 시작하지 않고 플렉스튜디오의 개념과 사용법을 학습하는 시간을 가졌어요. 사용자 가이드의 실습을 따라하며 방법을 익히고 모르는 용어는 추가로 검색하며 배웠어요. 그리고 앱을 만들기 위해서는 반드시 컬렉션(Collection)과 섹터(Sector)의 개념을 알아야 했어요.
컬렉션과 섹터를 알아야 하는 이유는 우리가 사용하는 앱이 데이터와 관련이 있기 때문이에요. 예를 들면 늘 고정된 밈이 차례대로 나온다면 데이터를 사용하지 않아도 되지만, 사용자가 선택한 밈들로 다음에 선택할 수 있도록 나오게 하기 위해서는 밈과 사용자의 선택 여부가 데이터로 관리되어야 해요. 일반적으로 사용자들이 선택하거나 입력한 정보들을 조직적으로 저장, 관리, 검색, 업데이트, 삭제할 수 있도록 지원하는 데이터베이스(DB)를 활용하죠.
플렉스튜디오는 다양한 외부 DB 와의 연동을 지원하는데요. 저는 외부 DB에 대한 이해가 부족하고 그 정도로 많은 데이터를 관리하거나 영구 보존이 필요한 앱이 아니기 때문에 플렉스튜디오에서 해결했어요. DB를 사용하지 않고도 앱 내에서는 데이터를 컬렉션의 카테고리(Category)로 추가하여 사용하는 방법이 있어요. 컬렉션은 데이터를 다루는 플렉스튜디오의 고유한 개념 중 하나로, 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳이에요. 컬렉션은 섹터라는 단위로 구성되어 있어요.
앱 개발의 첫 번째 고민은 이미지를 화면에 표현하는 방법이었어요. 플렉스튜디오는 이미지 컨트롤을 통해 업로드할 수 있지만, 저에게 맞는 방식은 아니었어요. 그 방식에서는 앱 사용자가 어떤 이미지를 클릭했는지 데이터를 저장할 수 없기 때문이죠. 그러기 위해 첫 화면(스탭, Step)에서 16개의 밈과 해당하는 이미지들을 데이터로 만들어주는 초기화(init)를 진행해요.
저처럼 개발이 낯선 분이라면 먼저 초기화의 개념을 알아야겠죠? 소프트웨어 초기화는 프로그램이나 시스템이 시작될 때 특정 상태나 값을 설정하는 과정이에요. 이는 소프트웨어가 예측 가능한 상태에서 시작되도록 보장하고, 올바르게 동작할 수 있도록 준비하는 중요한 단계죠.
이제 초기화 과정을 한 단계씩 설명할게요. [Dev Mode]의 Event영역에서 스크립트를 추가해요.
스크립트를 자세히 설명할게요. 일단 앱의 첫 화면에서 데이터를 초기화하는 if 문을 적어요. 그리고 필요한 이미지를 상황에 따라 사용할 수 있도록 ‘imgCategory’라는 카테고리를 생성하고 이미지마다 index 값을 추가해요. 프로그래밍 언어에서 index는 주로 배열이나 리스트와 같은 순차 자료구조에서 사용되며, 요소에 접근하거나 수정할 때 사용돼요.
if (_c.imgCategory){
f.Collection.removeSector('all','imgCategory');
} // 앱의 첫번째 화면에서 데이터를 초기화하는 if문
f.Collection.addSector({index : 1,imgURL :"https://ws.flextudio.com/shsong/meme/1.jpg"},'imgCategory');
f.Collection.addSector({index : 2,imgURL :"https://ws.flextudio.com/shsong/meme/2.jpg"},'imgCategory');
f.Collection.addSector({index : 3,imgURL :"https://ws.flextudio.com/shsong/meme/3.jpg"},'imgCategory');
//index 4부터 15까지 중략f.Collection.addSector({index : 16, imgURL :"https://ws.flextudio.com/shsong/meme/16.jpg"},'imgCategory');
저는 베타 버전으로 공개한 워크스페이스의 [데이터] 탭 – ‘호스팅 폴더’ 기능을 활용했어요. 링크로 이미지를 연결하면 저장 공간을 절약하고 접근성에 용이하며 이미지를 효과적으로 관리할 수 있어요.
이제 스크립트가 첫 화면에서 발생하도록 연결하는 과정이 필요해요. 첫 화면(Step 1)을 클릭한 후 ‘스텝 이벤트 사용’ 기능의 체크박스를 클릭해요. 이벤트 발생 시점을 ‘최초 시작 전(init)’으로 설정하고 이벤트 명을 ‘init_img’로 작성해요. 앱 사용자에게는 아직 보이지 않지만, 이제 16장의 이미지가 모두 준비되었어요.
준비가 완료되었으니 본격적으로 16강을 만들었어요. 토너먼트 형식으로 두개의 이미지 중 어떤 이미지를 클릭했는지 데이터로 저장하고 8강에서 선택된 이미지를 다시 화면에 표시하는 방법을 알아야 했죠. 차근차근 설명해 볼게요.
먼저 [Dev mode] – ImageBox1을 클릭하고 이미지를 URL을 통해 업로드해요. 그리고 미리 첫 화면에서 업로드했던 {=imgURL}을 적어줘요. 이제 16개의 이미지 중 어떤 이미지를 보여줄 지 정해야 하죠. 다시 말해 데이터를 연결하는 과정이 필요해요.
① 레이아웃을 클릭하고 데이터를 연결을 체크해요.
② 용도를 ‘조회’로 설정하고 카테고리명을 ‘imgCategory’로 입력해요.
③ ‘항목 없음 메시지 출력’ 여부는 이미지의 데이터가 하나도 없을 때 ‘항목이 없다’는 메시지를 자동으로 표시하는 기능이에요. 이상형 월드컵 앱에서는 모든 이미지의 데이터가 연결되어있기 때문에 상관없는 기능이었어요.
④ 필터로 우리가 원하는 데이터만 보여줄 수 있도록 조건을 설정해요. 아래 이미지는 index값을 ‘1’인 이미지를 연결할 수 있는 조건이에요. 이러한 방식으로 16강을 만들기 위해 두 개의 이미지씩 총 8개의 화면(step)을 반복해서 만들어요.
다음은 이미지를 버튼처럼 클릭할 수 있도록 만들 거예요. 클릭 이벤트와 클릭 시 스탭 이동은 이미지 컨트롤이 아닌 그룹과 레이아웃에서 이루어져요. ‘이벤트 사용’을 체크하고 Event Type을 ‘click’으로 설정해요. ‘이벤트 명’ 항목엔 어떤 이벤트를 넣어야 할까요?
클릭 이벤트 스크립트는 ‘round16select’라는 카테고리에 값이 참이면, 선택한 것이고 아니면 값이 없는 상태가 돼요. 디버거에서 앱을 작동시키면 index 값이 1번 이미지와 2번 이미지 중 선택한 이미지가 true가 되는 것을 확인할 수 있어요.
_c.imgCategory.activeSector.round16Select = true
클릭하면 다음 화면으로 넘어가는 건 아주 간단해요. 클릭 시 스텝 이동을 체크해요. 이미지를 클릭하면 원하는 화면으로 갈 수 있는 기능으로, 계속 이미지를 선택할 수 있도록 하는데 사용했어요.
8강부터 결승까지는 16강을 만들었던 과정에서 조금씩 수정되며 작업을 반복해요. 새로운 이벤트를 만들고 16강에 적었던 스크립트의 섹터 값을 변경해요. 저는 ‘round16Select’를 ‘round8Select’로 바꾸었어요.
레이아웃의 데이터 연결도 달라지게 되는데요. ‘index’ 값이 1과 2사이의 수이면서 클릭 이벤트로 생성된 ‘round16select’ 섹터의 값이 true인 조건을 추가해요. 화면으로 설명하자면, 1번 이미지와 2번 이미지 중 사용자가 선택한 기록이 있는 이미지(true라는 값이 존재)을 연결하라는 의미이지요. 이제 결승까지 같은 방법으로 변형하며 반복해요.
이상형 월드컵이 주요 기능이라면 부가적으로 공모전을 알리고 앱을 주변 친구들에게 공유하도록 유도하는 기능이 더 필요했어요. 브라우저 열기 기능은 플렉스튜디오의 자동 생성 기능을 활용해서 빠르게 만들었어요. 아래 순서대로 브라우저 기능을 사용해 보세요! (자동생성 기능을 활용해서 토스트 메시지도 만들었답니다.)
[Dev mode]의 이벤트(Event) 영역에서 ‘함수 자동 생성’버튼을 클릭해요. 이어서 ‘모바일 기능’에서 ‘브라우저 열기’를 선택하고 원하는 링크를 넣으면 스크립트가 생성돼요. 그리고 만들어진 스크립트를 버튼 컨트롤에 클릭 이벤트를 추가하면 외부 브라우저가 열리는 버튼을 간단하게 만들 수 있어요.
마케팅에는 정답이 없다는 생각에서 시작해 앱 개발에 도전하게 되었고 그 과정에서 많은 것을 배울 수 있었어요. ‘개발자 밈 이상형 월드컵’은 첫 번째 결과물로, 플렉스튜디오 사용자와 더 가까워지기 위해 노력한 흔적이 담겨 있죠. 이번 경험을 통해 얻은 소소한 인사이트들을 바탕으로 앞으로도 정답이 없는 마케팅 여정에서 조금씩 더 나아가고 싶어요.