Strapi 2

strapi UI에 대해서 이런 저런 요구사항과 변경사항들이 있었어서..😂 상시 업무 및 포트폴리오 시안과 함께 작업하다보니 이번 글이 생각보다 늦어졌지만, 기록하는 습관을 들여보자고 결심했던만큼 메모장에 간단히 적어둔 것들을 글로 다시 정리해본다!

일단 지난 번 기본적인 개발 환경 셋팅 및 api 호출 테스트는 해두었고, 이번 글에서 다룰 내용은 UI customize와 Collection Type, 그리고 Plugin에 관한 내용이다.

UI Customize

먼저 로고와 같은 경우는 strapi 내 기본적으로 제공되는 'Settings' 페이지에서 간단하게 변경할 수 있다. 이 때 좌측 메뉴 판넬에 적용될 아이콘과 로그인 페이지에 적용될 아이콘을 따로 지정할 수도 있다.
이외의 경우에는 대부분의 경우에 src > admin > app.js 폴더 내 config를 수정하게 된다. 기본적으로 파일 자체에 주석이 잘 달려 있어 조금만 읽어보고 찾아보면 크게 어려운 부분은 없었다. 이 중 내가 활용한 부분은 다음과 같다

• head: { favicon: favicon }
  말 그대로 favicon을 변경해준다. 이때 favicon 파일은 ./extensions/favicon.png로 저장해두고 불러오는 것이 일반적이라고 한다.
• locales: ["ko"]
  strapi에서 원래 제공하는 언어인 en(영어) 이외에 추가하고 싶은 언어를 배열 내에 나열한다. 그럼 아래와 같이 profile > experience > interface language 목록에서 해당 언어를 선택할 수 있게 된다.
  
• translations: { ... }
  translations는 어떤 언어에서 어떤 단어를 어떻게 번역할지 설정할 수 있다. interface language를 한국어로 설정해두었음에도 일부 단어는 그대로 영어로 출력되는 현상이 있었기 때문에 나는 이 부분을 굉장히 유용하게 사용했다.
  예를 들어, content manager 메뉴 내 화면에서 영어로 'created'인 부분을 한글로는 '생성일'로 나타내고 싶다면, 중괄호 내에 ko: { "content-manager.containers.Edit.information.created" : "생성일" },과 같이 작성할 수 있다.
  꼭 번역의 개념이 아니더라도, en: { "app.components.LeftMenu.navbrand.title": "Fount" }, 처럼 특정 부분을 다른 어구로 대체하고자 할 때 사용할 수도 있다. 나는 사내에서 사용될 페이지를 만드는 입장이었기 때문에, 조금 더 내부적이고 사적인(?) 느낌을 주기 위해 이런 용도로도 많이 사용했던 것 같다.
  좌변에 사용되는 string은 https://github.com/strapi/strapi/blob/3bfe1c913cf037c85a167f83a4bda0d848c9ba50/packages/core/admin/admin/src/translations/en.json 에서 확인해볼 수 있다! (ko.json도 있어요)
  간단하게 예시 코드를 남겨보자면, 아래와 같다.
• theme: { ... }
  theme를 비롯해 tutorials, notifications 등의 부분은 상당히 직관적이고 적용이 쉬워 간단히 코드만 남기고 패스!
  

이외에도 생각보다 커스터마이징 할 수 있는 부분이 많이 있었다.

Collection Types

이외에도 신기하고 유용하게 사용했던 부분은 바로 'collection type'이었다. strapi 공식 문서에는 다음과 같은 내용이 담겨있다.

• Collection types are content-types that can manage several entries.
• Single types are content-types that can only manage one entry.
• Components are a data structure that can be used in multiple collection types and single types.

정리해보면, collection type은 여러개의 엔트리를, single type은 하나의 엔트리를 관리하는 개념이고, component는 다양한 곳에서 반복되어 사용될 수 있는 데이터 구조를 의미한다.

내가 만들고자 하는 서비스는 블로그 글과 같은 개념의 데이터를 저장하는 공간이었기 때문에, 다음과 같이 컴포넌트를 구성해두었다.

content는 content(rich text; markdown)을, header는 글 목록에 사용될 title(text), sub title(text), thumbnail(media; images), date를 저장한다.
이후, collection type은 다음과 같이 구성했다.

여기서 'dynamic zone'이라는 단어가 처음 등장했는데, 공식 문서에 정의된 내용은 다음과 같다.

• Dynamic zones create a flexible space in which to compose content, based on a mixed list of components.

해석해보면, dynamic zone은 컴포넌트를 혼합하여 유연하게 컨텐츠를 만들 수 있다는 내용이다. 현재까지 협의된 바에 따르면 목표하는 블로그는 카드형 or 기본형으로 글 전개 타입이 나뉘기 때문에, 각 컨텐츠 타입을 dynamic zone으로 지정해두면 사용자가 자유롭게 추가하여 사용할 수 있다는 것이다.
사용자가 접하게 될 엔트리 추가 화면을 보면 더욱 이해가 쉽다.

pagecontent 타입에 해당하는 엔트리를 추가하는 페이지이다. 먼저 add a component to 'NAME'에 해당하는 버튼을 누르면, 위에서 구성해둔 대로 해당 type에 속해있는 component 중 무엇을 추가할 것인지 선택할 수 있다. 다시 말해, 한 entry 안에 자유롭게 원하는 요소를 추가해 넣을 수 있는 것이다. 언블리버블!

Plugin

마지막으로 plugin에 관한 내용이다. strapi 프로젝트의 좌측 패널에서는 플러그인에 관한 메뉴를 볼 수 있는데, 이 중 marketplace에서는 정말 다양한 플러그인을 구경해볼 수 있다. chatGPT 연동부터 다양한 editor나 번역 같이 다채로운 기능들이 있으니 시간이 될 때 차근차근 둘러보는 것도 좋을 듯 하다.

하지만! 더욱 좋았던 부분은 플러그인을 마음대로 추가할 수 있는 것이다. 과정은 아래 링크에 차근차근 잘 정리되어있다.
https://www.dgrebb.com/post/strapi-cms-admin-panel-customization-post-version-4-15-0/
이 부분을 잘 사용하면 훨씬 더 사용성이 높은 서비스를 만들 수 있을 것 같다. 현재 프로젝트에는 (어렴풋이) gpt를 연결해 컨텐츠를 알아서 검사해주거나 다듬어주는 기능을 추가하면 굉장히 유용하게 사용될 것 같다는 생각이다. 실현을 위해서는 조금 더 구체적인 방향과 계획이 필요하겠지만! 이 부분도 구현이 된다면 후에 글로 정리해보도록하겠다🫡