하자! NotionApps 로 노코드 앱 기획부터 공개까지 : 1)초기 설정
본 문서에서는 NotionApp을 사용하여 실제 앱을 개발하고 스토어에 출판하기 까지의 과정을 기록합니다.
이번에 만들 앱은 과일이나 채소의 품종을 검색하고, 해당 품종의 특징을 해설해주는 '품종 검색' 앱을 제작할 예정입니다.
Step1 : 노션과 NotionApp 연동하기
노션 페이지를 생성한 후 '/' 버튼을 입력하면 추가할 요소가 표시됩니다. 그중 '데이터베이스 - 전체 페이지'를 선택하여 '품종 리스트'라는 데이터베이스를 추가합니다.
데이터베이스의 속성은 나중에 추가도 가능하니 일단 아래의 항목을 추가합니다.
- 품종명 : 제목
- 종류 : 관계형
- 주요 생산지 : 텍스트
- 수확 시기 : 다중선택
개발 과정에서 확인이 쉽도록 테스트용 레코드를 추가합니다. (단, 관계형 항목인 '종류'는 현재 추가가 불가능하므로 공란이라도 상관없습니다.)
이제 NotionApp에 노션에서 작성한 '품종 리스트' 데이터베이스를 등록하겠습니다.
NotionApp에 가입한 뒤 Notion 계정과 연동을 마치면, Create New App 버튼을 누를 수 있습니다. 이때 이전에 작성한 '품종 리스트' 데이터베이스가 표시됩니다. 해당 데이터베이스를 선택한 뒤 Build App 버튼을 눌러 앱을 작성합니다.
바로 앱의 프리뷰 화면이 표시됩니다. 오른쪽 위에 있는 Publish 버튼을 누르면 앱이 공개되어 왼쪽 위에 표시된 URL로 접속할 수 있습니다. 이로써 노션과 NotionApp의 초기 설정 및 첫 배포가 완료되었습니다.
Step2 : 초기 설정하기
왼쪽 메뉴 탭에서 'Settings' 탭을 선택합니다. 이곳에서 App Name과 Description을 입력하고, URL도 변경합니다. 이 앱의 URL은 품종을 나타내는 'varieties'를 사용하여 varieties.notionapps.com으로 설정하였습니다.
설정 항목 중에는 'Show mobile view on desktop' 메뉴가 있습니다. 이 메뉴는 데스크탑에서 이 앱을 사용할 경우에도 모바일 환경의 표시 내용과 같이 표시해주는 기능입니다.
이 앱은 쇼핑 중에 핸드폰을 확인하며 품종 정보를 얻는 상황을 염두에 두고 제작하고 있기 때문에, 데스크탑에서의 표시 방식은 크게 중요하지 않습니다. 따라서 이 설정을 'enable'로 변경한 후, 모바일 뷰를 중심으로 진행하겠습니다.
Step3 : 초기 화면 만들기
현재는 앱을 열면 리스트 형식으로 품종 정보가 표시됩니다. 지금은 샘플로 입력한 품종만 표시되고 있어 큰 문제가 없지만, 앞으로 다양한 작물의 품종을 입력하게 되면 첫 화면에 수백 건이 리스트로 표시되는 것은 UI적인 측면에서 문제가 될 수 있습니다.
따라서 초기 화면에서는 블록 형식으로 야채와 과일을 배치하고, 해당 블록을 클릭하면 각 종류별 정보가 표시되도록 구성할 예정입니다. 이제 제대로 된 초기 화면을 만들어 보겠습니다. 우선, Notion에서 '종류 선택'이라는 이름으로 새로운 데이터베이스 페이지를 추가합니다.
왜 초기 화면을 만드는 데 데이터베이스를 추가해야 할까요?
NotionApp에서 표시되는 모든 요소는 Notion 데이터여야 합니다. 따라서, 초기 화면에 '딸기', '사과', '감자'와 같은 분류를 표시하려 해도, 이를 직접 NotionApp에서 추가하는 것은 불가능합니다.
이처럼 작은 요소까지 데이터베이스로 관리해야 하는 방식은 앱을 개발하는 과정에서는 다소 번거로울 수 있습니다. 하지만, 앱을 만든 후 유지보수의 측면에서는 큰 장점이 됩니다. 앱을 직접 수정하지 않고도 모든 요소를 Notion에서만 관리할 수 있기 때문입니다.
이제 새로 등록한 '종류 선택' 데이터베이스에 아래와 같은 항목을 추가하겠습니다.
- 이름 : 제목
- 분류 : 선택
- 이미지 : 파일과 미디어
- 종류 : 관계형
데이터베이스에 아래와 같이 데이터를 추가합니다.
여기까지 작업을 완료했다면, 이제 관계형 항목을 추가할 수 있습니다.
먼저 '종류 선택' 데이터베이스의 사과 항목에, '품종 리스트' 데이터베이스에 작성해 두었던 '후지' 항목을 추가합니다.
동시에, '품종 리스트'의 관계형 항목이었던 '종류'에는 '종류 선택' 데이터베이스의 '사과' 항목을 선택합니다.
이러한 설정을 완료하면, 이제 '종류 선택' 데이터베이스의 사과 레코드는 '품종 리스트'의 '후지' 레코드 데이터를 사용할 수 있게 됩니다.
이제 새로 추가한 데이터베이스를 NotionApp에서 사용하기 위해서는 데이터베이스를 추가할 필요가 있습니다.
사이드바의 Databases 항목에 들어가면, 방금 전에 추가한 데이터베이스가 표시되고, 체크박스를 선택하면 새로운 데이터베이스도 사용 가능한 상태가 됩니다.
이제 초기 페이지를 추가할 시간입니다. Screen탭으로 돌아와서 오른쪽 아래의 New Scrren 버튼을 클릭합니다.
클릭하면 새로운 스크린을 어떤 로직으로 표시할 것인지 선택할 수 있는 옵션이 나타납니다. 우선 Notion Database를 종류 선택으로 변경한 후, Screen Type은 View Items를 선택합니다.
스크린을 선택한 후에는 New Screen버튼 옆에 있는 Edit Navigation버튼을 클릭하여 '종류 선택' 스크린과 '품종 리스트' 스크린을 Side Navigation 으로 이동시킵니다.
여기까지의 작접으로 아래와 같은 페이지가 새로 작성되었습니다. 상상하던 메뉴와는 조금 다르네요. 제가 원하는 것은 딸기, 사과, 감자 등의 아이템 이미지가 블록 형식으로 표시되는 것입니다.
Screens 탭에서 '종류 선택' 스크린을 선택한 후, Edit Screen 버튼을 클릭하여 설정을 변경해 보겠습니다.
항목을 아래와 같이 변경합니다.
이제 상상했던 초기 페이지가 완성되었습니다. 여기까지의 작업을 Publish 버튼을 눌러 게시한 뒤, 직접 URL에 접속하여 확인해 보세요.
