디자이너의 요구사항에 맞춰 개발하기
들어가며
인테리어 컨설팅 중개 플랫폼 온룸을 개발하면서 가장 처음 부딛친 난관은, "어떻게 화면을 구성할 것인가" 였다. 그 말은 무슨 뜻이냐면, 디자이너의 요구사항을 어떤 식으로 충족시킬 것인지와 같은 말이다.
디자이너의 작업 결과물
디자인 팀에서 내게 넘겨준 작업 결과물은 두 가지로, Figma에 Zeplin을 연동하여 볼 수 있도록 작업해서 넘겨줬다.
Figma로 전체 화면 구조를 한 눈에 볼 수 있고, 세부적인 css를 제플린으로 알기가 쉽다. 그런데 css 요소를 다 알고 있다고 하더라도, 구현할 수 있는 방법은 천차만별이기 때문에 좀 더 효율적인 구조로 요소들을 배치하고 싶었다. 이전까지 개발을 할 때에는 간단한 SPA이고 순전히 나 혼자 개발을 했기 때문에 '모나보이지 않을 정도'로 css를 퉁칠 수 있었다. 그런데 디자인 요구사항이 생기니 css 요구사항이 픽셀단위로 정확히 구현되어야 했고, 디자이너가 요구하는 불규칙적인 규칙 속에서 나만의 규칙으로 요소들을 구현해야 했다.
디자인 시스템을 살펴보면 화면 요소는 8 Grid System을 "유연하게" 따른다(그래서 불규칙적인 규칙이라고 했다.) 그래서 아예 그리드를 fix해놓고 그 안에서만 컴포넌트를 구현하면 되는 것이 아니라, 종종 밖으로 벗어나는 녀석들에 대한 처리도 해야한다.
위 그림처럼 총 3가지 너비를 고려해야 했는데, 8 grid system의 너비인 1136px, 그리고 디자인어가 생각하는 100%의 크기인 1920px, 그리고 실제 브라우저의 innerWidth이다. 1920px과 브라우저 폭을 달리 구분한 이유는 1920px를 따로 구분하지 않게 되면 줌 아웃 했을 때 그림의 크기가 왜곡되어 보일 수 있기 때문이다. 또, 반응형을 고려하여 브라우저 폭이 작아질 때에 대한 대비도 해야했다. 그리고, 컴포넌트를 배치할 때 재사용할 수 있는 구조로 만들면 좋겠다는 생각이 들었다.
반응형 컨테이너 만들기
그래서 내가 선택한 방법은 반응형 컨테이너를 만드는 법이었다. 컨테이너의 코드는 아래와 같다.
import styled from 'styled-components';
interface IContainer {
type?: 'column' | 'row';
width?: string;
height?: string;
position?: 'static' | 'relative' | 'absolute' | 'fixed';
justifyContent?:
| 'start'
| 'center'
| 'right'
| 'left'
| 'space-between'
| 'space-evenly';
alignItems?: 'start' | 'center';
}
export const Container = styled.div<IContainer>`
position: ${({ position }) => position || 'static'};
width: ${({ width }) => width || '100%'};
height: ${({ height }) => height || '100%'};
display: flex;
flex-direction: ${({ type }) => type || 'row'};
justify-content: ${({ justifyContent }) => justifyContent || 'center'};
align-items: ${({ alignItems }) => alignItems || 'center'};
overflow: hidden;
@media all and (max-width: 1136px) {
width: 100%;
}
/*
border: 1px blue solid; */
`;먼저 interface를 정의해서 옵션을 주면 컨테이너의 속성을 조작할 수 있도록 했고, 옵션이 없으면 특정 기본값을 가지도록 했다. 즉, 기본적으로는 너비높이 100%에 flrx, center를 만족하는 컨테이너지만 옵션 유무에 따라 정렬이나 너비 높이 등이 고정될 수 있는 조건이다. 이렇게 하면 컨테이너를 만들 때마다 따로 styled.div로 빼서 정의해주는 반복적인 작업을 없앨 수 있다. 그리고 주석 처리 해놓은 border로 컨테이너를 이따금씩 시각화해서 볼 수 있다.
구체적인 예시
border를 활성화 하면 다음과 같이 파란색으로 컨테이너가 어떤 식으로 배치되어있는 지 보인다. 참고로 아래 사진에서 하단 배너의 실질적인 폭이 위의 navbar나 최상단 배너보다 좁아지는 걸 볼 수 있는데, 이것은 디자이너의 수정요청에 의한 결과이다..
각각의 요소들은 컨테이너 내에서 position:absolute를 사용하여 위치를 맞춰 주었다. 조금 더 구체적인 예시를 들어보자. 만약 네비게이션 바를 배치하기 위한 컨테이너를 짜고싶다면, 네비게이션 바가 높이가 80px이기 때문에 80px짜리를 만든다. width를 입력하지 않으면 우선적으로 브라우저 폭 전체에 해당하는 컨테이너가 생긴다. 그리고 그 속에 width가 1920인 컨테이너와 1136인 컨테이너를 겹쳐서 넣는다. 코드로 보자면 아래와 같다.
const Navbar = ()=>{
//코드 생략
return (
<>
<Container height="80px" position="fixed" style={navbarCSS}>
<Container width="1920px">
<Container width="1136px" position="relative">
//...내부요소 구현
//코드 생략
)
}이렇게 컨테이너를 여러 겹으로 겹쳐 놓아도 반응형으로 브라우저 폭이 자기 너비보다 작을 경우 width가 100%가 되도록 설정했기 때문에 아래처럼 컨테이너들이 합쳐지면서 어느 정도 브라우저 폭 변화에 대응하는 움직임을 보여줄 수 있다.
위와 같은 방법을 통해 디자이너의 요구사항을 어떻게 처리해야할 지에 대한 답을 낼 수 있었다. 컨테이너의 재사용을 통해서 화면에 효율적으로 요소들을 배치할 수 있었다.
'Tech Note' 카테고리의 다른 글
| 잘하는 프론트엔드 개발자란? (0) | 2022.09.03 |
|---|---|
| 온룸 코드 리팩토링하기 - 1편 : 안티 닌자 코드 (0) | 2022.06.24 |