하자! NotionApps 로 노코드 앱 기획부터 공개까지 : 2)상세 페이지 설정하기

지금까지의 설정으로 초기 페이지에서 작물을 선택하고, 각 작물을 클릭하면 작물별 상세 페이지로 이동하는 부분까지는 구현을 완료하였습니다.
하지만 상세 페이지는 아직 부족한 점이 있습니다.

현재 가장 신경 쓰이는 부분은 '이상한 부분에서 잘려버린 이미지', '불필요한 정보', '해당 작물에 속하는 품종의 표시 방식'입니다. 이번 시간에는 이러한 부분들을 수정해 보도록 하겠습니다.

Step1 : 불필요한 표시 항목 삭제하기

현재 상세 페이지의 이미지 항목을 보면, 초기 화면에 사용했던 사과 이미지의 위와 아래가 부자연스럽게 잘려 있습니다.

그 이유는 초기화면의 이미지는 가로세로비 1:1이미지를 사용하고 있는데 상세 페이지에서는 가로세로비가 2:1 이상인 스페이스가 주어지기 때문입니다.

그러나 아쉽게도 NotionApps에서는 상세 페이지에서 표시되는 이미지의 표시 설정을 변경하는 옵션을 제공하지 않기 때문에, 옵션으로 이 문제를 해결할 수는 없습니다.

이를 해결하는 방법은 세 가지가 있습니다.

1. '종류 선택' 데이터베이스에 상세 페이지의 가로·세로 비율을 고려한 새로운 이미지를 추가하는 방법.
2. '종류 선택'의 이미지 속성에 새로운 이미지를 추가한 후, 상세 페이지의 Behaviour > Allow Multiple 기능을 활용하여 여러 장의 이미지를 표시하여 부자연스러움을 완화하는 방법.
3. 이미지 표시 자체를 하지 않는 방법.

만약 개발 중인 앱에서 상세 페이지의 이미지가 필수적인 요소라면 첫 번째 또는 두 번째 방법을, 그렇지 않다면 세 번째 방법을 추천합니다.

그 이유는 NotionApps의 설계적인 약점 때문입니다. NotionApps에서 만들어진 앱은 SPA(Single Page Application)이기 때문에 일반적인 웹페이지에 비하여 초기 로딩의 부담이 있는데. 첫번째 두번째 방법은 별도의 이미지를 추가해야 하기 때문에 앱의 퍼포먼스를 악화시킬 가능성이 있습니다.

그러니 저는 이미지 항목 자체를 삭제 하도록 하겠습니다.

이미지를 삭제 하는 방법은 간단합니다. 프리뷰 화면에서 각 아이템을 클릭하면 아래와 같은 상세 페이지 편집 화면으로 이동합니다.

오른쪽 부분에는 상세 페이지에 표시할 항목을 편집하는 메뉴가 있습니다.
각 항목에 마우스를 올리면 오른쪽에 휴지통 아이콘이 표시되며, 이를 클릭하면 항목을 삭제할 수 있습니다.
우선, 모든 항목을 삭제하도록 하겠습니다.

초기 설정에서 표시되는 항목은 각 유저의 설정에 따라 달라질 수 있으므로, 일단 모든 항목을 삭제한 후 깨끗한 상태에서 상세 페이지 디자인을 시작하겠습니다.

Step2 : 상세 페이지 디자인

우선 상세 페이지에 표시 하고 싶은 항목을 '품종 리스트' 데이터 베이스에 추가하고 실제 정보를 추가합니다.

상세 페이지에는 각 카테고리의 이름과 각 카테고리에 속한 아이템 리스트를 표시하고 싶습니다.

이를 위해, 오른쪽 속성 탭의 ➕ 버튼을 클릭하여 필요한 속성을 추가합니다.

여기에서 중요한 것은 List 속성입니다.

List 속성은 현재 표시되고 있는 데이터베이스에서 관계형 속성에 등록된 항목을 리스트 또는 블록 형식으로 표시할 수 있는 기능입니다.

즉, 초기 화면에서 사과를 선택하면 '종류 선택' 데이터베이스의 사과 레코드 내 '종류' 속성에 등록된 아이템들이 자동으로 표시 됩니다.

만약 제대로 리스트가 표시되지 않는다면 각 데이터베이스 간의 관계형 데이터 베이스의 설정이 제대로 되어있는지 확인해주세요.

만약 관계형 데이터베이스의 설정이 완료되었음에도 항목이 표시되지 않는다면, 데이터가 제대로 갱신되지 않았을 가능성이 높습니다.

이럴 경우, NotionApps의 Reload Data 버튼을 클릭하여 데이터를 다시 불러온 후 실행하면 항목이 정상적으로 표시될 것입니다.

상세 페이지에 어떤 정보를 어떻게 표시할지는 여러분이 만들고 있는 앱의 특성이나 각 아이템의 속성에 따라 달라질 수 있습니다.

따라서 NotionApps에서 지원하는 옵션들을 직접 확인하면서 원하는 정보를 자유롭게 수정하시기 바랍니다.

이 앱에서는 데이터베이스의 데이터를 추가하고 품종 리스트 페이지와 품종별 상세 페이지를 아래와 같이 설정하였습니다.