두번째 프로젝트 - 법률 사무소 1페이지

메인 페이지를 제외하고 첫번째로 제작해야 할 페이지는 변호사 소개 페이지이다. 메인페이지 제작과 동일한 부분은 이미지가 겹치는 부분이고 나머지는 텍스트로 이루어져 있어 다소 쉽게 제작할 수 있었다.

하지만 디테일 체크 부분이 어려웠는데, 피그마 수치를 그대로 적용해도 피그마의 디자인과 다른 부분이 여럿 나왔다. 이를 어떤 화면을 기준으로 적용해야 할지 고민이 되었는데, 최대한 같은 레이아웃이 되도록 노력했던 것 같다.

어떤 화면에서 보는지는 접속하는 사람마다 다르기 때문에 화면늘 늘려도 보고, 조금 줄여도 보는 등의 과정을 통해 최대한 비슷하게 제작하였다.

각 페이지마다 항상 들어가는 타이틀 항목이 있었는데, 이를 컴포넌트 화 하여 각 페이지마다 컴포넌트로 작성하였다. 이는 디자인 부분에 통일성을 주고 중복되는 항목을 계속해서 만들지 않아도 되어 편리하게 작용했던 것 같다.

BarTitle.tsx

export default function BarTitle({ text }) {
  return (
    <div className="flex h-[92px] w-full items-center justify-center bg-[#EEE] px-4 text-[22px] font-[800] text-primaryRed-400 lg:text-[32px]">
      {text}
    </div>
  )
}

작업하는 인원이 나를 포함해 두명이어서 피그마를 참고하여 제작하지만 분명히 다른 부분들이 생길것이라는 것을 감안해, 공통으로 쓰일 요소들은 컴포넌트 화 하고, 디자인 적인 요소에 대한 서로의 피드백이 자주 있어야 할 것 같다.