지난번 최종프로젝트 때는 1920px 웹 뷰 먼저 만들고, 그 이후에 1240px, 360px 순으로 작은 사이즈 화면을 진행했더니 반응형 웹을 만들면서 많은 시행착오가 있었다.
( 지난번엔 useEffect로 화면 크기를 인식해서 많은 문제가 있었기에 이번엔 같은 실수를 반복하지 않으리.... )
그래서 이번 개인프로젝트는 시작할 때부터 모바일 first에 미디어쿼리를 사용해보자고 생각했다. 그런데... 검색하다보니 모바일 first랑 반응형 웹 디자인이랑 다른거라고 하네? 이것부터 자세히 알아보고 제대로 시작해야겠다고 느껴 조사하게 된모바일 first VS 반응형 웹 디자인의 차이!
모바일 first VS 반응형 웹
요약하자면,
모바일 first
- 모바일 화면부터 만든다!
- 모바일 화면, 데스크탑 화면이 다르다!
반응형 웹 디자인
- 데스크탑~모바일까지 모든 기기에서 동일한 화면이 보인다!
- 화면 구성은 그대로 가고, 기기에 따라 요소들의 크기만 변경됨
- 데스크탑 first라고 보면 됨
왜 둘을 따로 생각하지?
- 데스크탑 first로 하면 CTA버튼, 인터페이스의 복잡성, 효과 등 기존에 있던 기능들, 버튼들, UI 등 변경할 게 많아짐
- 따라서 아래의 이유로 둘을 따로 생각하게 됨
- 데스크탑 first로 할 것인가, 모바일 first로 할 것인가의 차이
- 모바일 화면은 UI를 다르게 할 것인가 결정
모바일 first의 장단점
장점
- 모바일 접속시 반응형 웹 페이지보다 빠르게 로딩됨
- 중요한 거 위주로 만들어놓고, 데스트탑으로 수정시 기능 추가하거나 변경 가능
- 가장 중요한 컨텐츠 위주로 보여주게 됨
- 검색엔진 우선순위 : 구글에선 이미 2010년에 모바일 first 원칙으로 설계된 사이트를 검색 결과 최상위 위치시키도록 했음
- 검색엔진에서 우선순위가 되도록 하는 모바일 first 원칙?
-> 구글의 모바일 first 인덱스 (MFI) 참고
(참고 : https://www.beusable.net/blog/?p=2328)
- 검색엔진에서 우선순위가 되도록 하는 모바일 first 원칙?
단점
- 제한된 시각적 디자인
(데스크탑 first처럼 다양한 애니메이션, 비디오 및 효과들을 넣기 어렵다. 물리적으로 화면 크기 자체가 작으니까 일단 더 그렇지) - 시간 및 비용 증가
(한 화면만 보여주는 것도 아니고, 모바일의 UI/UX를 생각하는건 데스크탑 화면이랑은 또 아예 다른 말이 되어버리니까)
📝 CTA버튼이란?
CTA(Call To Action)란, 목표를 달성하기 위해 고객의 특정 반응이나 행동을 유도하는 것을 말합니다. 웹페이지나 모바일 페이지에서 회원가입, 로그인, 결제 등 고객들의 반응을 이끌어 내기 위해 배치한 버튼 혹은 링크 등을 CTA라고 합니다.
(출처 : https://pixso.net/kr/skills/cta-button/)
💡 Tip
- 모바일 first에서 폰트 크기는 14~18px이 적절
결론
정리해보자면,
- 데스크탑 first : 많이 만들어놓고 덜어내는 작업 할거냐,
- 모바일 first : 이제는 대다수의 사용자들이 웹마저도 모바일로 보기 때문에 품이 좀 들더라도 시대의 흐름에 맞춰 진행할 것이냐
내가 했던게 결국 모바일 first 방식이었는데, 이걸 1920 데스크탑 뷰를 먼저 만들었던 것 뿐이었나보다.
모바일이랑 데스크탑 뷰가 완전 달랐으니까 일반적으로 통용되는 '반응형 웹 디자인'만은 아니었던 거지.
🚨 근데 중요한건, 미디어쿼리를 사용했을 때 미디어쿼리도 지원하지 않는 하위 브라우저가 있다!
따라서,
내 프로젝트에서는 모바일 first로 css를 작성하고, 태블릿 및 데스크탑에서 미디어쿼리가 작동하도록 만들자!
모바일 first와 반응형 디자인의 차이점 출처 : https://www.kimdirector.co.kr/972
디자인 시스템은 왜 사용하는가?
지금까지 next UI만 써봐서 다른 디자인 시스템도 써보고 싶었다.
shadcn 하도 유명하길래 써봐야겠단 생각은 있었는데,
개발자에게 항상 중요한건 'why?' 아니겠는가?
디자인시스템은 과연 왜 사용하는걸까?
그리고 shadcn은 왜 유명하고 왜 사용하는걸까?
디자인 시스템이란?
명확한 표준과 디자인 패턴에 따라 조정되는 재사용 가능한 구성 요소 모음.
왜 사용하는가?
정해져있는 디자인 패턴으로 통일된 시각적 효과, 일관된 사용자 경험을 향상시킬 수 있기 때문.
Next UI 사용할 때 느꼈듯이, 이미 정해져있는 일관된 디자인을 가져옴으로써 사용자는 웹페이지의 디자인 자체가 일관된 느낌을 준다고 느낄 수 있다.
디자인 시스템 출처 : https://semaphoreci.com/blog/front-end-design-system
Shadcn의 장단점
Shadcn을 검색하면 가장 많이 볼 수 있는 문구가
'Shadcn은 컴포넌트 라이브러리가 아닙니다. copy and paste 할 수 있는 구성요소 모음입니다.' 이다.
장점
-
headless UI
(참고 : https://blog.teamelysium.kr/shadcn-ui)- 'presentational-less' 컴포넌트라고도 불림 (일종의 디자인 패턴)
- 보여지는 부분(UI 로직)과 동작(표현(presentation)) 부분을 분리!
-> 컴포넌트의 재사용성, 유지보수성, 그리고 테스트 용이성을 크게 향상
-
tailwind css 호환 : Next.js에서 지원하는 tailwind css와의 호환성은 2024 프론트엔드 시장에서 가장 뜨거운 감자로 만들기에 탁월한 듯 하다.
-
컴포넌트 설치 방식이 아닌, 복사해서 가져오는 방식이기 때문에 내 프로젝트에서 커스터마이징이 훨씬 자유로울 것 으로 보인다.
(Next UI 사용할 땐 커스터마이징에서 워낙 애를 먹었기 때문에 본인에게는 이 부분이 가장 이점으로 다가온다.)
단점
- 유지보수
- install 방식이 아니기 때문에, 가져온 코드를 유지보수하는 것은 철저히 이용자에게 달려있다.
