이번 7주간 프로젝트에서는 모바일 웹의 프론트엔드를 담당했습니다.
프로젝트 진행 중 참고했던 내용과 고민했던 내용을 모아보았습니다.
1. 모바일 웹 해상도
pc웹의 경우는 사용되는 해상도가 많지 않지만, 모바일이라면 다양한 크기를 고려해야 합니다.
그렇다면 기준은 어디로 잡는 것이 좋을까요? 그런 생각에서 출발했습니다.
안드로이드의 경우 360 x 640px / IOS는 375 x 667px을 기준으로 한다고 합니다. 다른 곳에서는 360 x 740px, iOS는 375 x 812px라고도 하네요.
이번 프로젝트에서는 후자를 선택해, 360px * 740px 기준으로 시작했습니다.
그렇지만 모바일에서는 너비가 좁은 갤럭시 폴드(280px), 높이가 낮은 아이폰5/SE(568px)도 있으니 염두해 두시면 좋습니다.
갤럭시 폴드 화면이 많이 잘립니다.
개발시 직접 테스트한 해상도
갤럭시 폴드 280 x 653px
갤럭시 폴드 펼친 사이즈 참고용 : 568 x 653px
아이폰 5/SE : 320 x 568px
(테스트용 사이즈) : 340 x 720px
삼성 갤럭시 S8+ : 360 x 740px -> 주로 참고한 사이즈
아이폰 12 프로 : 390 x 844px
아이패드 : 768 x 1024px
노트북 : 1024 x 768px
맥북 프로 : 1440 x 900px
데스크탑 : 1440 x 1024px
실 기기 테스트
갤럭시 폴드 5
갤럭시 노트 20
아이패드 (상세 정보 모름)
삼성 갤럭시 북(상세 정보 모름)
요즘 반응형 모바일 웹에서는 디자인을 보통 몇x몇으로 치나요??
해상도의 기준이 있어야 UI디자인을 시작할 수 있다
모바일 웹 디자인에 대해 모르면 안돼요!
2. vue와 react
이전에는 쭉 vue를 사용해왔고, 이번 프로젝트에서 처음으로 react를 사용했는데요. 빠르게 익혀야했던 만큼, 둘의 공통점과 차이점을 비교한 내용을 찾아보았습니다.
참고한 링크를 소개합니다.
[Vue vs. React 비교]
React와 Vue
[번역]React와 Vue에서 같은 앱을 만드는 차이
3. 프로젝트 디렉터리 구조
프로젝트를 진행하다보면 컴포넌트, 화면, 에셋, api, 라우터, 유틸, 스토어 등등이 추가되고, 이 구조를 나눌 필요가 있습니다.
참고한 링크를 소개합니다. 실제로 이 구조를 거의 다 따라한 것 같습니다.
프론트엔드 아키텍처 다층화구조(layered architecture) (+실제 폴더 구성)
4. 모바일 웹 만들기 & 모바일 100vh 실제 화면 크기로 맞추기
최초 개발 때 참고한 링크입니다. 흐름을 참고하기에 좋은 글이었습니다.
React, 모바일 웹 만들기
모바일 웹 개발을 하고, 실제로 로컬로 테스트 해보면 브라우저 상단과 하단 때문에 뷰포트의 크기가 달라집니다.
무조건 100vh로 하면 화면이 잘리는 등, 문제가 발생할 수 있습니다.
모바일 100vh 스크롤, 이라고 검색하면 많은 해결법이 있지만 제가 사용한 방법을 기록해봅니다.
function setScreenSize() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
useEffect(() => {
setScreenSize();
const handleResize = () => {
setScreenSize();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);타입스크립트를 사용했다면 app.tsx에, 아니라면 app.js에 작성해줍니다.
이후에
:root {
--vh: 100%;
}최상위 css파일에 해당 내용을 작성합니다. 저는 index.css파일이었습니다.
height: calc(var(--vh, 1vh) * 100);이후 모바일 뷰포트가 필요한 곳에 해당 코드를 작성합니다.
만약 footer가 있다면
height: calc(var(--vh, 1vh) * 100 + footer의 높이);로 작성하면 적절한 크기가 됩니다.
참고한 링크입니다.
React 모바일 웹 앱 100vh 실제 화면 크기로 맞추기
5. 모바일에서 input/textarea 클릭시 화면의 문제
안드로이드와 ios, 그리고 브라우저마다 현상이 다른 문제입니다.
input / textarea 클릭시 화면이 그대로 밀리는 경우가 있고, 뷰포트가 그대로 줄어드는 경우가 생깁니다.
- 줄어드는 경우는 아마도 vh가 적용된 경우
이 프로젝트에서 원하는 것은 화면이 그대로 밀리는 것입니다.
index.html의 head에 해당 코드를 작성합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">이후 index.html에 script영역을 만들어서 해당 코드를 작성합니다.
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);이렇게 하면 모든 페이지에 적용됩니다.
혹시 해결되지 않는다면 밑의 링크를 참조해보세요.
해결에 사용된 참고링크
Android Keyboard shrinking the viewport and elements using unit vh in CSS
참고링크
Mobile keyboard pushes up content because of an absolutely positioned drawer
window.innerHeight
Window sizes and scrolling
6. localhost 웹페이지 모바일로 확인해보기
pc와 모바일이 같은 네트워크에 연결되어있어야 한다고는 하지만,
작성자는 특수한 상황이기 때문에 다른 방식을 사용했습니다.
pc와 모바일이 같은 네트워크에 접속할 수 없기 때문에, pc와 휴대폰을 연결하여 테더링을 통해, 휴대폰 쪽의 네트워크로 일치시켰습니다.
그리고 이후에 사용한 방법입니다.
localhost 웹 프로젝트화면 모바일로 확인해보기
7. 스마트폰 모바일 개발자 도구 확인
실기기로 테스트를 진행하다보면, 문제가 발생해서 콘솔을 확인하고 싶을 때가 종종 있습니다.
그럴 때 사용하는 방법입니다.
가장 먼저 개발자 옵션을 활성화 시켜줍니다. 그리고 개발자 옵션에서 usb 디버깅 옵션을 켜줍니다.
이후 pc와 휴대폰을 연결해줍니다.
pc에서는 크롬을 실행하여 chrome://inspect/#devices 로 이동합니다. 모바일에서도 크롬을 실행합니다.
pc 크롬에서 휴대폰이 연결된 것을 확인했다면, 확인하고자 하는 페이지 밑의 inspect를 클릭합니다.
그렇게 하면 나타나는 화면을 통해 pc에서도 조작할 수 있고, 개발자 도구도 확인할 수 있습니다.
구글 크롬(Chrome) 스마트폰 모바일 개발자 도구 사용하기
7. react에 적용할 ui 프레임워크 / 컴포넌트 라이브러리
vue에서는 vuetify를 주로 사용하고, 저는 quasar를 사용했었습니다.
그렇지만 react에서는 비슷한 느낌의 프레임워크나 라이브러리가 없는 것 같아 조사해보았습니다.
react 최고의 ui 프레임워크 / 컴포넌트 라이브러리
8. styled-component
ui 프레임워크나 라이브러리는 쓰지 않았지만, CSS in JS를 위해 styled-component를 사용하였습니다.
그렇지만 어떻게 쓰는지는 잘 몰라서, 관련 내용을 조사해보았습니다.
CSS 대신 사용하기 때문에 파일을 분리할 필요가 있었습니다.
그리고 속성을 마치 prop을 사용하듯 받을 수 있기 때문에 동적으로 작동할 수 있어서 좋았습니다.
// 마진에 사용했던 코드
margin: ${(props) => props.$marginTop || 'auto'} ${(props) => props.$marginRight || 'auto'}
${(props) => props.$marginBottom || 'auto'} ${(props) => props.$marginLeft || 'auto'};타입스크립트와 적용한다면 인터페이스도 같이 정의하여 사용할 수 있습니다.
export const StyledName = styled.p<MarginProps>`
// css 내용
`export로 작성했다면 react 파일에서는 아래와 같이 사용합니다.
import {
StyledName,
} from '스타일시트 경로';[React] 💅Styled-Components 사용법
[styled-component] 왕초보가 styled-component 배워보기
[React] styled-components 분리하기
Styled-Components 사용하고 CSS 파일을 줄여보자
[Styled-component] styled-component 좀 더 똑똑하게 쓰기
[React] Styled-component 전역 스타일 정의하기 - createGlobalStyle
Styled-components에서 props 똑똑하게 넘겨주기
9. 반응형 웹과 Breakpoint
이번 프로젝트는 모바일 웹이었지만, PC에서도 사용은 가능하도록 하는 것이 목표였기 때문에, Breakpoint에 대해 고민이 있었습니다.
실제 사용한 Breakpoint는 일반적인 Breakpoint와 다르고, 페이지 별로 다르기 때문에 작성하지는 않았지만, 참고한 링크를 소개합니다.
사용했던 코드 예시
@media (min-width:768px) {
// 작성 css
}
CSS 반응형 레이아웃 너비를 나누는 기준 정하기
반응형 웹 UI Breakpoint에 대한 고찰
9. react 상태 관리 라이브러리
pinia를 사용하는 vue와 다르게 react에서는 사용할 수 있는 상태 관리 라이브러리가 많습니다. 최초에는 많이 사용한다는 redux를 사용하고자 하였으나, 바꾸기로 결정되어 조사했던 내용을 링크를 소개합니다.
redux를 사용하기로 했었어서 redux 내용이 많습니다.
React 상태관리 라이브러리 리뷰 (Zustand, Recoil, Jotai, React-query)
리액트 리덕스 상태관리
Redux 라이브러리
react-redux 시작하기
10. 패키지 매니저 선택
PM으로는 npm, yarn, pnpm을 쓴다고 들었습니다. 어떤 pm을 고르는 것이 좋을지 참고했던 글을 소개합니다.
속도와 phantom dependency를 해결하는데 도움이 된다고 들었기에 pnpm을 사용하였습니다.
이후 조사에서는 global 저장소에 패키지를 한 번만 저장함으로써 저장 공간을 절약할 수 있다는 장점이 있다는 것을 알았습니다.
- npm도 보안을 개선하여 사용해도 괜찮을 것 같다는 이야기도 들었습니다.
