미니모는 모바일 초대장, 행사 포스터 등을 드래그 앤 드롭으로 쉽게 제작할 수 있는 미니 웹 빌더입니다.

🔗 발표영상 - 3분 내외의 간단한 기능소개 부분입니다. 전체적인 기능을 보실 수 있습니다.

🔗 배포링크: https://www.minimo.life

🔗 frontend: https://github.com/minimo-editor/minimo-client

🔗 backend: https://github.com/minimo-editor/minimo-server

• Frontend

  • React
  • ContextAPI
  • ES6
  • Styled-components
  • Google-Maps-API
  • Immer
  • AWS-S3
  • Jest
  • React-testing-library

• Backend

  • Node.js
  • Express.js
  • MongoDB
  • Mongoose

• 🏄‍♂️ 프로젝트 개요
• 📅 작업 기간
• 🕹 기능
• 🧑‍💻 TECH 이야기
• ⛑ TEST
• 💡 특징
• 📖 프로젝트 사용 방법
• 🧑‍💻 프로젝트를 마치며

미니모는 드래그 앤 드롭으로 쉽고 빠르게 트랜디한 웹을 만들 수 있는 웹 빌더입니다.

처음엔 3D, 실시간 인터렉션 등을 포함한 재밌는 요소들을 블록단위로 제공하고 싶었습니다.

하지만 2주의 짧은 개발 기간 때문에, 이번 2주 동안엔 아래와 같은 목표를 갖고 진행하였습니다.

• 추후에 편하게 추가적인 블록(에디터의 기능) 및 템플릿을 추가할 수 있게 확장성 있는 구조로 만들기
• 유저 경험에 핵심적인 드래그 앤 드롭을 라이브러리 없이 직접 만들기
• 기본적인 블록 요소들(텍스트, 동영상, 사진 등)이 포함된 에디터를 잘 만들기
• 컴포넌트들을 재사용성 있게 하여 추후에 블록에 추가할 수 있게 만들기

• 기획 : 2021/05/03 ~ 2021/05/07 (1주)

  • 아이디어 브레인스토밍, 기획, 기술 검증
  • minimo wireframe 작성

• 개발 : 2021/05/10 ~ 2021/05/21 (2주)

  • 2주차
    • 에디터 및 드래그 앤 드롭 등 핵심 기능 구현
    • 사용자 인증, 전역 상태관리 등
  • 3주차
    • 컴포넌트 및 커스텀 훅 재사용성 있게 리팩토링
    • 드래그 드롭 애니메이션, 추가 블록, 기능 등
    • 유닛 테스트 및 배포

🔗 발표영상 - 3분 내외의 간단한 기능소개 부분입니다. 전체적인 플로우를 보실 수 있습니다.

• 기본 템플릿을 선택할 수 있습니다.
• 드래그 드롭을 통해 쉽게 블록들을 추가할 수 있습니다.
• 이미지, 동영상, 유튜브 영상 등을 추가할 수 있습니다.
• 소셜 미디어 버튼에 개인 링크를 연결할 수 있습니다.
• 특정 위치를 지도에 마크하여 주소와 함께 표시할 수 있습니다.
• 모바일 화면에 맞게 미리보기가 가능합니다.
• 원하는 주소를 설정할 수 있습니다.

템플릿 선택	배경 변경 / 블록 추가 / 소셜링크
지도 블락 및 이미지 변경	텍스트 편집
블록 스왑 및 삭제	모바일 화면 미리보기
youtube / video 블락	blank(공백) 블락
발행 / 주소설정	발행된 페이지 (모바일 화면)

• 초기 설계단계에서는 전역 상태는 단순히 prop-drilling을 막기 위한 정도였기 때문에 Context API를 선택했습니다.

• 구현을 하면서 Editor(project)의 상태관리 로직이 커져서 Redux를 사용할지 Context API + useReducer를 사용할지 고민했는데, 제 프로젝트는 Redux가 제공하는 여러 기능도 필요가 없었고, 상태의 변화가 그렇게 빈번하지 않기 때문에 굳이 Redux를 받아 번들링 사이즈를 ���우기 보단 Context API + useReducer를 선택하게 되었습니다.

• 초기 설계단계에서는 아래의 '기존 코드 데모'처럼 블록들을 이동 시 애니메이션이 없어도 괜찮을 것 같았습니다. 하지만 막상 만들어보니 이는 보기에 어색했고, 사용자의 경험을 좋게하기 위해 애니메이션을 추가하기로 했습니다. 다만 이미 개발 마무리 단계였기 때문에 기존에 완성된 에디터 및 블록 로직은 건드리지 않고 싶었고 애니메이션 관련 로직이기 때문에 컴포넌트/비즈니스 로직과 분리시키고 싶었습니다.

  따라서 아래의 AnimateBlock 추가한 코드처럼, AnimateBlock컴포넌트를 만들고, 그 children으로 블록들을 받아 애니메이션이 생기도록 구현하였습니다. AnimateBlock은 children의 unique key값을 기준으로 변화된 엘리먼트만 찾아 애니메이션을 하기 때문에, 여러 곳에서 재사용성 있게 사용할 수 있다고 생각합니다.

  해당 기능을 만들면서 처음으로 useLayoutEffect, React.Children 등을 이용하였는데, 그동안 리액트를 많이 공부했다고 생각했지만 여전히 모르는 것이 많다는 것을 느꼈고, 공식문서를 자주 봐야한다는 것 또한 느꼈습니다.

기존 코드	기존 코드 데모
AnimateBlock 추가한 코드	AnimateBlock 추가 후 데모

라이브러리 없이 리액트에서 드래그 앤 드롭을 구현하는 글들을 찾아보면 대부분 컴포넌트 자체를 draggable하게 하고 드래그 앤 드롭을 합니다. 하지만 이는 문제가 있었습니다. draggable컴포넌트 내부에 text가 있으면, 간헐적으로 그 text가 드래그 된다는 것이었습니다.

유저가 잘못해서 text를 드래그 드롭하면 text는 data-transfer에 필요한 정보를 갖고 있지 않아 에러가 났습니다. 물론 이 에러는 핸들링이 가능하며 css를 통해 text요소에 드래그가 안되게 할 수도 있었습니다. 하지만 드래그 할 대상이 text 외에도 여러 요소드를 담고 있을 수도 있고, 추후에 블록들을 추가할 때마다 신경쓸 게 많아 보였습니다.

따라서 이 문제는 블록마다 해당하는 이미지를 만들고, 그 이미지를 draggable하게 해서 해결하기로 했습니다. 이미지는 단일 컴포넌트로 내부에 다른 요소들을 담고 있지 않기 때문에 문제를 원천적으로 차단할 수 있다고 생각했으며, 블록 추가도 용이하다고 생각했습니다. 또한 드래그 할 블록들은 사실 보여주는 용도일 뿐, 실제로 사용하는 요소가 아니기에 목적에도 더 맞는 구현이라는 생각이 들었습니다.

이를통해 꼭 코딩으로만 문제를 해결할 필요는 없다는 걸 배웠습니다. 그 문제의 본질을 파악하려고 노력하고 그에 맞는 해결 방법을 제시하는 것이 결국 더 나은 서비스를 만드는게 아닐까 생각이 들었습니다.

• React Testing Library와 Jest를 사용하여 Custom Hook, util, reducer 등의 중요 로직을 우선적으로 유닛 테스트를 작성했습니다.

• WYSIWYG (What You See Is What You Get)

  프로젝트를 제작/편집 하는 과정에서의 모습 그대로 결과물이 나오도록 구현하였습니다.

• Block 단위 에디터

  미니모는 전통적인 WYSIWYG 에디터와 다르게 block 단위로 구현하였습니다.

  전통적인 WYSIWYG는 하나의 contenteditable 요소 안에 서로다른 html markup 을 작성하는 방식인데, 이는 편집하는 각각의 요소가 서로에게 영향을 주는 작은 버그가 존재합니다. 저도 이러한 불편함을 겪어본 적이 있기 때문에, 미니모는 paragraph, title, image 등을 각각 독립적인 contenteditable 요소로서 편집하도록 구현했습니다.

• Clean output data

  프로젝트의 결과물은 html markup 이 아닌 json 형식의 데이터로 저장하였습니다.

  몇몇 에디터, 블로그 서비스 등에서 html markup 형태로 데이터를 저장하여 많은 고민을 했지만, json 형식에 장점이 더 많다고 생각하여 json 형식으로 저장하였습니다.

  html markup 형식

  <section name="0ed1" class="section section--body section--first">
     <div class="section-divider">
        <hr class="section-divider">
     </div>
     <div class="section-content">
        <div class="section-inner sectionLayout--insetColumn">
           <h3 name="f8e8" class="graf graf--h3 graf--leading graf--title">
              <br>
           </h3>
           <p name="83d3" class="graf graf--p graf-after--h3">
              So what do we have?
           </p>
        </div>
     </div>
  </section>
  <section name="d1d2" class="section section--body">
    ...
  </section>

  minimo의 json 형식

  {
      "_id": "60a8ac7ec767550586e16766",
      "address" : "freeboard",
      "concept": "basic",
      "blocks" : [
          {
              "type" : "paragraph",
              "data" : {
                  "contents" : {
                      "texts": "<p>this is free<p>"
                  },
                  "styles": {
                      "color": "black"
                  }
              }
          },
          {
              "type" : "title",
              "data" : {
                  "contents" : {
                      "texts": "give away alert"
                  },
                  "styles": {
                      "color": "red"
                  }
              }
          },
          {
              "type" : "image",
              "data" : {
                 "contents" : {
                      "src": "https://minimo.s3.amazonaws.com/project-image/any.png"
                  }
              }
          }
      ],
     "createdAt": "2021-05-22T07:02:22.401Z"
  }

  위와같은 json 형태로 데이터를 저장 함으로써, 현재 사용하는 minimo 웹 뿐만 아니라, native, desktop app, 오디오 리더, 챗봇 등에게도 쉽게 적용할 수 있을거라 생각되었습니다.

  또한 백엔드에서의 validation도 더 용이하고, 특정 부분의 데이터만 추출하는 데에도 수월할 것이라고 생각했습니다.

1. 디렉토리 이동

   // client
   
   cd minimo-client
   
   // server
   
   cd minimo-server
   

2. package.json에 정의된 패키지 설치

   npm install
   

3. Firebase Realtime Database 사용에 필요한 dotenv 설정

   디렉토리 최상단에 .env.example을 .env로 변경 후 아래의 값들을 변경

   // client
   
   REACT_APP_API_KEY=[FIREBASE_CONFIG_API_KEY]
   REACT_APP_AUTH_DOMAIN=[FIREBASE_CONFIG_AUTH_DOMAIN]
   
   REACT_APP_SERVER_URL=[SERVER_URL]
   
   REACT_APP_AWS_ACCESS_KEY=[AWS_S3_ACCESS_KE]
   REACT_APP_AWS_SECRET_KEY=[AWS_S3_SECRET_KEY]
   
   REACT_APP_GOOGLE_API_KEY=[GOOGLE_API_KEY]
   
   // server
   
   PORT=[PORT_NUMBER]
   MONGO_URL=[MONGO_DB_URL]
   

4. 실행

   // client
   
   npm start
   
   // server
   
   npm run dev
   

• 프로젝트를 끝내고 스스로 잘했다고 생각한 점은 핵심 기능 관련 라이브러리를 사용하지 않았다는 것 입니다.

  이전 프로젝트에서 'react-three-fiber'라는 라이브러리를 사용했는데, 내부에서 돌아가는 three.js, canvas, webGL을 잘 모른 채 사용하여 문제들을 해결하기 어려웠고 원하는 대로 구현하지 못한 부분도 있었습니다.

  따라서 이번에는 핵심 기능 관련 라이브러리를 사용하지 않고 기본 web api를 이용하여 구현하려 했습니다. 덕분에 어려운 상황을 만났을 때, MDN과 stackoverflow 등을 통해 기본 api의 특성을 학습하며 문제를 해결할 수 있었습니다. 또한, 이후에 관련 라이브러리 사용 시에도 더 깊게 이해하고 사용할 수 있을 거라 기대합니다.

• 또한 회사에서 디자이너님과 작업을 한다고 가정하고, 기술적 편의를 위해 초기 wireframe의 디자인을 바꾸지 않기로 마음먹었는데, 이를 잘 지켜서 초기 디자인과 같은 결과물을 만든 점도 잘 했다고 생각합니다.

• 평소 생산성이 높은 웹앱에 관심이 많았는데, 직접 만들어 볼 수 있어서 너무 재밌었습니다. 추후에 parallax scroll 애니메이션, 선물리스트 등 재밌고 인터렉티브한 요소들을 포함한 블락들을 더 추가할 예정인데 너무 재밌을 것 같네요. 😄