[💌 FEATURE REQUEST] 레이아웃 로직을 추가한다

[JengYoung]

멈춰! 🖐🏻 잠시 체크 들어갑니다~

• [X] 다음 페이지에서 중복되지 않음을 확인했어요. 🙆🏻
• [X] 다른 분들께서 허락해주신다면, 제가 구현해보고 싶어요! 🙆🏻‍♀️

배경 및 설명

레이아웃이라는 상위 컴포넌트가 있어야 더욱 생산성이 높을 것 같다고 생각했다. 이유는 다음과 같다.

1. 일일이 드래그로 짜기에는 부정확하다.
2. absolute만으로는 구조화가 전혀 될 수 없다. 더더군다나, 반응형을 지원해준다는 것은, 추후 유저가 늘리거나 줄이는 등 수정할 때 다른 하위 컴포넌트나 형제 컴포넌트 역시 역시 반응성 있게 수정을 지원해줘야 한다. 그런데 블록과 그룹의 관계는 이러한 반응성을 설명하기에 빈약하다고 판단했다.
3. 결론적으로 당장으로도 웹을 만들 수는 있겠으나, 이는 반응성에 대해 매우 빈약하다. 이를 구성하기 위해 용이한 틀을 짜도록 구현한다.

기대결과

1. 레이아웃이라는 것을 만들면, flex를 기반으로 하여 계층적으로 큰 틀을 짤 수 있도록 한다.
2. 레이아웃은 CRUD가 가능하다.
3. 한 레이아웃 컴포넌트에서는 수직으로 분할하기, 수평으로 분할하기 등이 존재한다. 이는 기존 컴포넌트의 오른쪽/아래쪽에 추가하는 것을 원칙으로 한다.
4. 레이아웃이 삭제되면 레이아웃에 속하는 컴포넌트들 역시 삭제된다.
5. 기본적으로 레이아웃은 모든 컴포넌트를 생성 및 이동시킬 때 가로 중앙/ 세로 중앙에 배치시킨다.

대안 제시

실제로 확인해 보니, 페이지를 만드는 회사에서 자주 쓰이는 화면 구성 방식이었다. 따라서 충분히 적용할 만한 이슈라고 생각하여 본격적으로 진행하려 한다.

• builder.io
• 아임웹

방식

음... 다음과 같이 페이지 안에 녹여져 있는, 하나의 틀처럼 구현할 계획이다. 또한 레이아웃은 중첩이 가능할 것이다. 예컨대 하나의 ul 안에는 여러 개의 li가 있는 것처럼 말이다. 이 친구들은 기존의 블록들과 달리 '반응성'을 가질 수 있다.

<Page>
  {layouts.map(layout => <Layout source={layout.source}>{layout.children}</Layout>)}
</Page>

주의사항

이 레이아웃이라는 기능이 추가됨으로써 일어난 효과는, 기존의 Block과 Group에 대한 Position을 재정의해야 한다는 것이다. 결국 <전체 페이지>가 아닌 <특정 페이지> 상에서 이동이 되어야 하고, 이는 꽤나 적잖은 리소스가 들어갈 것 같다.

그렇지만, 문제를 얼추 생각하고 설계 방법을 생각하고 나니 할 일이 명확해졌다. 열심히 고민한 자, 또 일하자!!

참고자료

• builder.io
• 아임웹