Chapter 2. Landkit으로 페이지 만들어보기

2.1. 페이지 생성

좌측 상단 Pages 탭 > + 버튼 눌러 페이지를 생성할 수 있어요.

폴더를 지정하면서 페이지를 생성하려면 폴더명/페이지 이름를 입력해요.
🔑 예시) 2023/프로모션 → 2023 폴더 안에 프로모션 페이지 생성

페이지 이름만 입력했을 경우 지정안함 폴더 안에 페이지가 생성돼요.

페이지의 폴더를 바꾸고 싶다면 Pages 탭 > 페이지 이름 옆 더보기(∙∙∙) 클릭 > Change name 클릭 > 폴더명/페이지 이름을 입력해 바꿀 수 있어요.

2.2. 컴포넌트 생성, 복사, 붙여넣기, 삭제

Landkit은 컴포넌트를 여러 개 쌓아 페이지를 만들 수 있어요. 간단한 페이지를 함께 만들어볼까요?

컴포넌트 생성

컴포넌트 추가 버튼 혹은 + 버튼을 클릭하여 컴포넌트를 추가할 수 있어요.

좌측의 Components 탭을 누르면 컴포넌트 리스트를 확인할 수 있어요.

Tip) 컴포넌트 리스트에 마우스를 올리면 컴포넌트를 미리 볼 수 있어요

컴포넌트 리스트

좌측의 Components 패널의 리스트에서 컴포넌트를 선택하면 페이지에 컴포넌트가 추가돼요.

사용 가능한 모든 컴포넌트는 아래 링크에서 확인할 수 있어요.
🔗 컴포넌트 리스트

이 튜토리얼에서는 3개의 컴포넌트로 페이지를 만들어 볼게요.

• Cover/Full_Description
• Event/Card_Button
• Share/Basic

컴포넌트 복사

컴포넌트 선택 후 copy 버튼 클릭 혹은 단축키 cmd+c로 컴포넌트를 복사할 수 있어요.

컴포넌트 삭제

컴포넌트 선택 후 X 버튼 클릭 혹은 단축키 ←(Backspace)로 컴포넌트를 삭제할 수 있어요.

컴포넌트 순서 이동

컴포넌트 선택 후 컨트롤러 좌측 상단 이동 버튼을 드래그 하거나, 단축키 cmd + ↑(Up), ↓(Down)으로 컴포넌트 순서를 변경할 수 있어요.

2.3. 컴포넌트 콘텐츠 입력하기

콘텐츠 준비중이에요.
자세한 콘텐츠 가이드 바로가기

2.4. 컴포넌트 디자인하기

콘텐츠 준비중이에요.
자세한 디자인 가이드 바로가기

2.5 페이지 배포하기

배포는 Landkit 에디터에서 작업한 페이지를 사용자들이 실제 웹사이트에서 볼 수 있도록 만드는 것을 의미해요.
접근 가능한 url이 생성되고, 이 url을 통해 페이지를 공유할 수 있어요. 에디터 프리뷰에서 보이는 페이지와 동일한 페이지를 사용자들이 볼 수 있어요.

아니에요. 현재 에디터에서 작업한 내용은 자동으로 저장되고 있어요. 배포 전(draft)은 실제 사용자가 접근할 수 있는 페이지가 만들어지기 전의 상태를 의미해요.
draft 상태에서 모든 작업을 끝내고, 실제 프로덕션에 나가기 전 publish 하는 방식을 권장하고 있어요.

2.6 유의사항

• 브라우저 창을 켜두고 있다가 다른 작업을 하고 다시 돌아왔다면, 새로고침 버튼을 눌러 최신 내용을 반영하고 작업을 시작해주세요. 이런 경우가 아닐 때에도 작업 전엔 항상 새로고침 후에 시작하는 것을 권장해요.
• 동시에 작업하고 있는 상황에서 다른 사람이 새로 작업한 내용이 있다면 좌측 상단에 알림을 띄워주고 있어요. 현재 권장되는 방식은 시간차를 두고 작업하는 것이에요. 알림을 받았다면 논의 후 순서를 정해서 작업하는 방식을 추천해요. 빠른 시일 내에 후에 현재 작업중인 내용과 다른 사람이 작업한 내용을 합쳐 반영해주는 기능을 추가할 예정이에요.

• 페이지 최신화하기를 눌러주세요.
• 배포된 페이지는 많은 트래픽을 감당하기 위해 캐싱되어 있어요. 캐싱되었다는 의미는 사용자가 페이지를 요청했을 때, 서버에서 새로운 페이지를 만들어내는 것이 아니라, 캐싱된 페이지(이전 요청에서 보여줬던 페이지)를 보여주는 것을 의미해요. 따라서 새로 수정된 사항이 있다면 캐시를 지워주는 과정이 필요해요. 페이지 최신화하기 버튼을 눌러 캐시를 지울 수 있어요.