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

첫번째 프로젝트 주짓수 점수판을 끝내고 이어 두번째 프로젝트를 시작한다. 이번 프로젝트는 정적인 페이지 위주의 프로젝트이며 next.js, tailwind css를 익숙하게 배울 수 있는 좋은 기회라는 생각이 든다.

시작은 Landing Page 이다. 이부분은 홈페이지의 메인 페이지에 해당하는데, 피그마 디자인을 참고하여 똑같이 제작한다.

tailwind.config.js

프로젝트에 정해진 색상들과 폰트 크기들이 있는데, 이를 공통적으로 사용하기 위해 tailwind.config.js에 파레트를 생성하고 폰트사이즈를 기입하였다.

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '1.75rem' }],
      lg: ['1.125rem', { lineHeight: '2rem' }],
      xl: ['1.25rem', { lineHeight: '2rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['2rem', { lineHeight: '2.5rem' }],
      '4xl': ['2.5rem', { lineHeight: '3.5rem' }],
      '5xl': ['3rem', { lineHeight: '3.5rem' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1.1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    extend: {
      borderRadius: {
        '4xl': '2rem',
      },
      colors: {
        primaryTextColor: '#B1B1B1',
        backgroundBlue: '#002C7E',
        bgGray: '#222222',
        primaryColor: '#DFD4BC',
        primary: {
          100: '#688DB9',
          200: '#69A4FF',
          300: '#3872DD',
          400: '#2A64BD',
          500: '#1E66EA',
          600: '#0D0046',
        },
        primaryRed: {
          100: '#B98787',
          200: '#BF5454',
          300: '#BF1B1B',
          400: '#880502',
        },
        primaryBlue: {
          100: '#AECAFF',
          200: '#689CFF',
          300: '#0D61FF',
          400: '#003FB6',
          500: '#002C7E',
        },
      },
      // fontFamily: {
      //   sans: ['SCoreDream', ...defaultTheme.fontFamily.sans],
      //   display: ['Lexend', ...defaultTheme.fontFamily.sans],
      // },
      maxWidth: {
        '2xl': '40rem',
        '6xl': '76rem',
      },
      screens: {
        lg: '1280px',
        '3xl': '1600px',
      },
    },
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')],
}

이미지 이외 다른 부분은 피그마의 해당 수치를 참고하여 제작하면 되는데 배경 이미지에 개별 이미지가 겹치는 부분을 제작하는 것이 어려웠다. 테일윈드 css 공식문서를 지속적으로 참고하여 해결한 방법은 relative와 absolute를 사용하는것이다.

relative와 absolute

이미지를 2개 이상을 겹치기 위해 배경이 되는 이미지, 즉 부모 클래스에 relative를 준다. 이는 부모클래스에 하위에 위치한 자식클래스의 이미지 클래스에 absolute를 적용하여 자식 클래스의 절대위치를 지정해줄 수 있는 옵션이다.

<div class="... relative">
  <p>Relative parent</p>
  <div class="... absolute bottom-0 left-0 ">
    <p>Absolute child</p>
  </div>
</div>

bottom-0, left-0등으로 절대 위치를 설정해줄 수 있다.

또한, 피그마 디자인의 수치를 적용하였을때 디자인과 다른 부분들이 있었다. 이는 디자이너의 실수 일수도 있지만 최대한 비슷하게 적용하도록 노력했다. 주로 font-weight, leading, border 등이 있었다.

모바일 화면의 반응형 디자인도 고려해야되는 프로젝트 이기에 디테일을 꼼꼼히 체크해야겠다는 생각을 하였으며 테일윈드 css 를 사용하는데 자신감이 생기게 되었다!