Mobile-First, Desktop-First

웹사이트를 개발할 때 Mobile-First로 할지, Desktop-First로 할지 고민을하게 됩니다.
오늘날반응형 디자인을 위해 필수로 알아야하는 지식들을 정리해보았습니다.

Twitter 설문 결과

• Mobile-First: 33.3%
• Desktop-First: 21.9%
• 둘 다 혼합: 24.7%;

Mobile-First

웹사이트를 개발할 때 작은 뷰포트 크기에 대한 CSS 작성을한 다음 CSS Media-Query를 사용해서 더 큰 뷰포트 사이즈에 대한 경험으로 변경하는 방식입니다.

.section {
    padding: 2rem 1rem;
}

@media (min-width: 62.5rem) {
    .section {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 4rem 2rem;
    }
}

Desktop-First

반대로, 더 큰 뷰포트 크기에 대한 CSS를 먼저 작성한 후 Media-Query를 사용해서 더 작은 크기에 대한 CSS를 변경하는 방식입니다.

.section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

@media (max-width: 62.5rem) {
    .section {
        display: block;
        padding: 2rem 1rem;
    }
}

Workflow

Mobile-First Workflow에는 두가지 방식이 있습니다.
1. 모바일용 전체 페이지 작업 후 완료되면 더 큰 크기로 개선하기
2. 모바일 우선으로 시작해서 섹션/구성요소를 별도로 처리하고 더 큰 크기로 개선하는 병렬 방식