웹 프로젝트 개발범위 파악 (Front-End)

Flex·2022년 3월 3일
0
post-thumbnail

웹 프로젝트의 개발범위는 어떻게 파악할지에 관한 아주아주 간단한 정리글입니다. ⚠️ 짧음주의


🔍 개발범위 파악하기

📎 마크업을 하는 과정

  • 전체 디자인을 훑어봅니다.

    • 대략적인 큰 레이아웃을 구상합니다.
    • 메인 컴포넌트를 분석합니다.
    • 반복되는 컴포넌트를 구분합니다.
  • 가변적인 요소가 들어가는 항목을 확인합니다.

    • 이미지가 가변일 때, no image 처리는 어떻게 될까?
    • 이미지 비율이 다를 때 어떤 기준으로 크롭할까?
    • 텍스트가 가변일 때 몇 줄까지 노출할까? (말줄임)
    • 값이 없을 때 0으로 노출될까, 항목 자체가 사라질까?
  • 기획/디자인 측에서 요청한 인터랙션이 있을까? (이거 해주세요 라던지..)

  • 실제 현업에서는 디자인으로 인터랙션이 들어오기 때문에 해당 구성을 잘 살펴보고 파악하는 것이 중요합니다.

📎 마크업 = 마크없 = No Answer!

  • 같은 화면이더라도 마크업 하는 방식은 개발자마다 모두 다릅니다.

  • 모작을 하는 과정 / 다뤄보지 않은 레이아웃에 대한 고민이 있을 때?
    벤치마킹할 사이트의 코드를 훑어봅시다!

  • 주로 국내 서비스라면 NAVER, 글로벌 서비스라면 Google이 좋은 예제입니다.
    ㄴ 개발자 도구를 사용해서 마구 뜯어보세요.

profile
💵 오늘을 살자

0개의 댓글