녹호두

노코드를 배우게 된 계기

프로덕트 매니저로 일하면서, 다양한 프로토타입으로 실제 테스트를 해보고 싶은 경우도 있고, 내가 생각한 것을 구현해보고자 하는 욕구가 크다. 그런데 늘 그렇듯 개발자와 디자이너 리소스는 부족하기 때문에, 우선순위에 밀려 못하게 되는 경우가 많다.

그래서, 내가 직접 앱/웹을 만들 수 있다면 어떨까라는 생각을 했고, 노코드 플랫폼을 알게 되었다.

어느 정도 시간만 투자한다면 원한 바 대부분을 얻을 수 있을 것이라고 생각했고, 스스로 하나의 특장점이 될 수 있다고 생각해 강화해보고자 한다.

노코드 툴에 관해

노코드 툴은 말 그대로 No code. 코드를 직접 쓰지 않고 앱/웹 등의 서비스를 만드는 툴을 말한다. 2022.03 현재 노코드 툴은 굉장히 많이 있다. 글라이드, 아달로, 앱 시트, 버블 등등. 이에 관해서 사수 캠프에서 다양한 노코드 툴의 사용목적이나 방법에 대해 안내한 글을 참조해 처음에는 글라이드를 공부하려 했다.

글라이드를 선택했던 이유

1. 구글 스프레드시트와의 연동을 지원한다.

노코드 툴은 대부분 데이터베이스를 Airtable이라는 툴을 사용하는듯하다.

하지만 노코드 앱/웹 메이킹 툴만 공부하는 데에도 시간이 많이 쓰일 것이라고 예상해, 굳이 DB를 위한 툴 공부에 시간을 쓰고 싶지 않아 구글 스프레드시트와의 연동을 지원하는 글라이드를 선택했다.

2. UI가 예쁘다.

아래의 스크린숏은 내가 만들려고 했던 "거래를해보쇼"라는 앱이다.

대충 봐도 알 수 있듯이, 글라이드 Glide는 아주 쉬울 뿐 아니라 예쁜 UI의 앱을 만들어주는 막 강한 툴이다.

하지만, 생각보다 글라이드는 쉽고 빠르게 만드는 데에 초점이 되어있을 뿐, 자유도가 생각보다 많이 낮았다.

글라이드 Glide로 앱 만들기 후기가 궁금하다면 👇

⚠️ 글라이드 Glide의 한계

1. 첫 페이지가 무조건 Style에 정해진 8가지 중 하나만 가능하다. 

리스트, 타일, 캘린더, 맵, 체크리스트, 카드, 스와이프, 디테일.

그렇기 때문에 설명이 적힌 랜딩페이지를 만들거나 하는 것은 어렵다.

2. 검색이 제한적이다.

타이틀, 부가정보 등으로 검색할 수 있으나, 날짜를 지정해 캘린더로 검색하는 기능은 지원하지 않는 듯했다.

또한, 필터도 하나의 조건만 가능하다. (eg. 총 상품 종류가 신발, 바지, 시계인 경우 세가 가지 중 하나만 선택 가능하며 다른 필터를 함께 적용할 수 없다. )

일정과 관련된 마켓플레이스를 만들어 보고 싶었기 때문에 위의 이유 때문에 글라이드 Glide를 사용하지 않게 되었고, 2번의 장점을 포기한 채 1번의 장점을 가진 앱 시트 Appsheet를 배우게 됐고, 앱 시트는 글라이드에 비해 심미적인 UI가 떨어지지만 자유도가 매우 높다. (수많은 노코드 플랫폼 중에서 구글이 앱 시트를 인수했다는 점에서, "쉽고" "파워풀하다"라는 점이 이미 증명됐다고 생각할 수도 있다.)

글라이드 Glide를 공부할 때는 제대로 된 가이드 문서가 없다시피 해, 하나하나 눌러가면서 배워야 했지만, 앱 시트는 <코딩하는 약사>라는 블로거/유투버분이 계셔서 강의자료를 참조하려고 한다.

코딩하는 약사님 강의 수강 기록 👇

내가 글라이드로 만든 앱

거래를해보쇼

장르

마켓플레이스(플랫폼)
거래가능일자를 선택할 수 있는 마켓플레이스를 만들고자 했지만 실패했다.

소요시간

기웃거린 시간은 4시간 실제 제작 소요시간은 1시간 내외
사용법을 몰라서 익히는 데에 시간이 많이 들었다. 강의나 자료가 있다면 훨씬 단축됐을 것이다.

링크

https://delicious-request-5699.glideapp.io/
(무료체험판이라 동시접속인원 최대 1명)

목적

날짜 선택이 가능한 마켓플레이스를 만들자!
개발자/디자이너 없이 내가 머릿속으로 생각한 무언가를 구현해보자!

화면 구성

1. 랜딩페이지 = 상품 리스트
검색 가능, 상품 추가 가능

2. 상품 상세페이지
상품정보 노출, 수정 가능, 판매자에게 전화 문의 가능
전화 문의하기 클릭 시 전화 발신됨

3. 상품정보 수정 페이지
상품정보 수정 가능, 삭제 가능

후기

1. 글라이드로 만들기 포기한 이유
날짜 선택 관련 기능이 글라이드에서 약해서 중도 포기하였다.

2. 아쉬웠던 점
유저별(이메일 등의 값)로 상품 등록할 수 있는 사람과, 수정/삭제할 수 있는 사람을 정의하는 방법까지 깨우쳤으나 유료 기능인 관계로 구현하진 못했다.

3. 시간 소요
노코드 툴도 고르고 처음부터 배우느라고 시간을 많이 썼다. 꽤 재밌고 미려한 앱이 나왔지만, 글라이드 특유의 자유도가 너무 낮아서 아쉬웠다. 특히 첫 페이지가 꼭 리스트/카드 등의 형식 이어야 하는 점이 아쉬웠다.

다시 글라이드로 돌아올 수도 있지만,
우선은 구글스프레드시트 연동을 기본적으로 제공하면서 자유도가 훨씬 높은, 앱시트를 공부해보려고한다.

템플릿은 글 맨 밑에 있어요 👇

최근 들어 개인들이 사용하는 SNS가 많아짐에도

인스타그램 프로필 bio에는 한 가지 주소밖에

넣을 수 없다는 한계점을 극복하기 위해

링크 트리와 같은 서비스들이 많이 등장하고 있습니다.

링크 트리는 기본적으로 무료이고,

꽤 다양한 템플릿을 제공하고 있기 때문에

많은 분들이 쉽게 사용하는 것 같습니다.

하지만 저는 링크 트리가 무료 버전이 갖는 한계와

디자인적인 제한점들을 벗어나고 싶었습니다.

어디선가 느껴지는 삼성 갤럭시 S10e 느낌에

썩 만족스럽지는 않았고, 링크 개수가

제한된다는 과금 구조도 공감이 어려워

그래서 링크 트리와 비슷한 기능을 할 수 있는

무언가를 찾았고 그 정답은 '노션'이었습니다.

노션으로 링크 트리와 충분히 똑같은

기능을 하면서도 더 자유롭고 더 예쁘게

만들 수 있는 노션 템플릿을 공유합니다.

두 가지 버전을 만들었습니다.

1. 링크 트리보다 업그레이드한 버전

2. 링크 트리랑 최대한 유사하게 만든 버전

링크 트리보다 업그레이드한 버전

좌측 이미지는 PC에서 보이는 화면,

우측 이미지는 모바일에서 보이는 화면입니다.

PC에서 2단 분리로 보이는 부분이

모바일에서는 세로로 이어져서 보입니다.

단 분리를 해서 좌측에는 이미지, 우측에는 링크를 넣었습니다.

링크는 모두 콜 아웃을 사용해서 박스로 구성했습니다.

링크 각 이름마다 url을 하이퍼링크로 삽입해서,

클릭하면 해당 주소로 이동이 가능합니다.

각 아이콘은 기본 이모지를 활용할 수도 있고

구글에 "유튜브 로고 png"와 같은

방법으로 검색해서 하나하나 이미지를 넣으면 됩니다.

예시로 아티스트를 가정해서

SNS, 음원사이트, 연락할 수 있는 오픈 카카오톡 주소

이렇게 세 개로 구성해봤습니다.

원하시는 링크를 자유롭게 구성하면 됩니다!

** 해당 페이지의 이미지는 oth, 의 wallpaper를 활용했습니다.

이미지 출처 : othcomma.kr/

링크 트리랑 최대한 유사하게 만든 버전

위와 같은 구성이나, 

링크 트리와 최대한 유사하게 만들었습니다.

PC에서 볼 경우는 다소 비율이 예쁘지 않지만,

모바일에서 보는 경우 깔끔해서 사용하기 좋습니다!

위의 이모지는 기본 이모지 세트에서 한 가지를 

선택해서 넣을 수도 있고, 

자신만의 로고나 다른 이미지를 삽입해서

업로드할 수도 있습니다.

템플릿 사용법

아래의 템플릿 링크 주소를 들어가 보면

우측 상단에 위와 같은 이미지가 있습니다.

여기서 "복제"를 누르면

본인의 노션으로 해당 템플릿이 복제됩니다. 

이후 자유롭게 수정하여 사용하시면 됩니다!

👇 템플릿 링크 주소👇

1. 링크 트리보다 업그레이드한 버전

2. 링크 트리랑 최대한 유사하게 만든 버전

다른 노션 템플릿도 구경하기

대학생이라면 노션 프로를 공짜로 쓸 수 있어요!

템플릿은 글 맨 밑에 있어요 👇

1박2일 2박3일 단기여행을 위한 준비물 리스트

저는 짧은 여행을 적은 짐으로 다니는 것을 좋아하는 편입니다.

다닐 때마다 짐에 대해 고민하는 것이 귀찮아서,

이번에 단기 여행을 위한 최소한의 준비물 리스트를 준비했습니다.

저와 비슷한 니즈가 있으신 분들에게 도움이 되길 바랍니다.

> 편의를 위해 다양한 제공 방식을 마련했습니다.

아래의 JPEG를 다운로드 해 사용하실 수도 있고,

Notion 템플릿을 복제해서 사용하실 수도 있고,

PDF를 다운로드 해 사용하실 수도 있습니다.

> 겸용으로 활용 가능한 것들에 대한 정보는 아래의 글로 따로 남겼습니다. 

비누 활용

세면도구 중 클렌징 폼, 샴푸, 바디워시는 

비누를 통해 비누(클렌징 폼, 바디워시 겸용), 샴푸 혹은

비누(클렌징 폼, 바디워시 샴푸 겸용)로

사용자에 따라 간소화가 가능합니다.

수건

수건이 정말 짐을 많이 차지하는데요

여행지가 다이소와 같은 대형마트가 있는

도심-시내라면, 여행지에 도착해서

수건을 구입하시는 것을 추천드립니다.

오고 가는 짐에 부피가 너무 크게 차지해요

멀티 충전기

노트북, 아이패드 등을 가져가는 경우

동시에 충전이 필요한 경우도 있고

단자와 케이블이 각각 다른 경우도 있죠

여러 충전기를 가져가기보다

멀티 충전기 하나 구비하시는 것을 추천합니다.

** 멀티 충전기 관련 글 👇

기초 화장품

여행용 키트로 가져갈 수 있는 샘플을

가져가는 것도 좋은 방법이지만,

개인적으로 추천하는 것은

마스크팩을 여러 개 가져가는 것입니다.

기름기와 수분기가 충분한

마스크팩을 사용하면, 간단한 스킨케어를

충분히 커버할 수 있거든요

부피는 조금 더 나가겠지만

샘플이 없다면, 혹은 귀찮다면

추천드리는 방법입니다.

지퍼팩

사용한 수건, 젖은 옷들은

돌아오는 길에 굉장히 골칫덩어리기 때문에

지퍼백(지퍼팩)을 하나 가져가시는걸

추천합니다.

혹은 조금 큰 비닐봉지 한 장 정도

가지고 가면 요기 나게 쓰입니다.

물병

스테인리스로 된 텀블러는

깨질 염려도 없고 좋지만,

무게가 많이 나가기 때문에

짐 간소화를 위해서는

트라이탄 소재로 된 플라스틱 물병을

추천드립니다. 

👇 템플릿 링크 주소👇

Notion 리스트입니다.

준비물 리스트 pdf입니다.

오늘 제가 남긴 템플릿이 도움이 되길 바랍니다.

문의사항 댓글로 남겨주세요!

다른 노션 템플릿도 구경하기