eun9077 님의 블로그
UXUI 디자이너가 반응형 모르면 안 되지🤷♀️ [사전직무교육 4일차_10/23] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 본문
UXUI 디자이너가 반응형 모르면 안 되지🤷♀️ [사전직무교육 4일차_10/23] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기
eun9077 2025. 10. 26. 17:06
안녕하세요-!
벌써 사전직무교육 4일 차입니다
앞으로 교육이 하루밖에 남지 않았어요
오늘도 힘내서 교육을 들었습니다
🙌 아자자 🙌
이번 4차시에서는 반응형 레이아웃을 심도 있게 배웠어요
UXUI 디자이너라면 반응형에 대해서는 잘 알고 있어야 한다고 생각하는데요
요즘에는 PC, 태블릿, 핸드폰 등 다양한 기기를 사용하고
그만큼 화면 크기가 다양해졌기 때문에
그에 맞게 유동적으로 변하는 서비스가 필요하기 때문이죠...!
| 항목 | 반응형 웹 | 적응형 웹 |
| 레이아웃 방식 | 하나의 유동적 레이아웃이 화면 크기에 따라 자동 조정됨. |
여러 개의 고정 레이아웃을 만들어두고 화면 크기나 디바이스에 따라 선택됨. |
| 유연성 | 모든 화면 크기를 포괄하기에 신규 디바이스에도 비교적 대응력 있음. |
사전에 정의된 기기/사이즈만 커버하기 때문에 새로운 크기나 디바이스에는 대응이 좀 더 제한적임. |
| 개발 / 유지관리 | 하나의 코드베이스로 관리 가능 → 유지보수 효율 높음. | 각 레이아웃마다 별도 구현이 필요하거나 레이아웃 수가 많아지면 유지보수 부담 증가. |
| 성능 / 최적화 | 모든 콘텐츠가 로드될 가능성이 있고, 화면 크기마다 최적화가 어려움. |
특정 기기용으로 최적화된 레이아웃을 제공할 수 있어 성능 측면에서 유리함. |
| 설계 전략 | “모든 디바이스에서 잘 보이도록” 유연하게 디자인 → 모바일 퍼스트 전략과 자주 연계됨. |
“특정 디바이스/사용자군에 맞춰” 최적화된 경험 제공 → 기기/사용자군이 명확할 때 유리함. |
반응형 웹과 적응형 웹의 차이에 대해 알아봤어요
먼저 적응형 웹은 특정 디바이스에 맞게 정해진 레이아웃을 제공해요
예시로 네이버 홈페이지를 들 수 있겠네요!
네이버 홈페이지 웹/앱 화면이에요
레이아웃과 보이는 콘텐츠가 완전히 다르죠?!
아이패드로 보면 또 다르더라고요
디바이스 크기 별로 최적화되어 있다고 느꼈어요
반대로 반응형 웹도 볼까요
반응형 웹은 웹이든 앱이든 기본으로 만들어진 서비스에서
크기 조정을 하면 자연스럽게 레이아웃이 변경돼요
적응형 웹과 다른 건 뚝뚝 끊기는 느낌이 없다는 점이에요
물론 특정 지점에서 레이아웃이 변경되도록 지정은 해줘야 하는데요
이 지점을 바로 "Breakpoint"라고 합니다!
반응형 웹의 예시로는 원티드 서비스가 있었어요!
동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.
원티드 홈페이지에 접속해서 창 크기를 줄이고 늘려봤어요
아주 자연스럽게 레이아웃이 변하는 걸 볼 수 있죠?!
디자이너와 개발자 분들이 아주 잘 만들어 놓으신 케이스....
그들의 노고에 Cheers
👏👏👏👏👏
++++
반응형 웹과 적응형 웹도
스타일&베리어블과 마찬가지로
회사 서비스, 업무 문화에 따라 달라지니
그에 맞춰 작업하는 게 중요해요!
그렇지만 요즘엔 반응형으로 제작하는 경우가 많긴 해요
이어서 반응형 레이아웃 실습!
레이아웃을 다 그렸는데요
위의 선택된 영역은 카드 UI 라서
창 크기가 달라져도 어느정도 크기가 일정하게
유지되는게 보기에도 좋기 때문에
최소한의 형태 유지를 위한 값을 지정해줍니다
영역 선택 - Layout - Dimensions - Width 에서
Minimum Width 와
Maximum Width 를 지정해주면
짠
이렇게 별도로 지정된 걸 볼 수 있어요
이렇게 지정해놓으면 전체 창 크기가 달라져도
어느정도 크기가 일정하게 유지됩니다!
++++
그리고 최근에 피그마가 업데이트되면서
Layout 패널에 Flow - Grid 옵션이 추가되었어요
프레임을 만들고 그리드를 설정해주면
이렇게 프레임 내부에 설정한 그리드만큼 기준선이 생겨요
코딩에서는 css 에서 display: grid; 로 표현할 수 있어요
예를 들어 가로 4칸, 세로 6칸으로 하고 싶다!
아래처럼 css 코딩을 할 수 있어요
(물론 html에서 큰 container를 하나 만들고
그 안에 div 박스를 여러 개 만들었다는 가정 하에)
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
}
제가 졸업작품 중 하나를 웹사이트를 만들면서
직접 코딩까지 했는데요
(정말 힘들었지만....)
오랜만에 Flex와 Grid 공부했던게 떠올라서 재밌네요
ㅎ.ㅎ
아까 그린 레이아웃 우측에 똑같이 그려봤어요
Flow를 그리드로 하니까 요소 하나하나가
그리드에 맞게 착착 스냅되는데...
굉장히 쉽게 느껴졌고
뭔가 알 수 없는 쾌감이 들었어요 😏
피그마 업데이트는 정말 수시로 되는데
그 퀄리티가 좋은 것 같아요
++++
그리고 이전 차시들과 마찬가지로 여러 요소들을
만들고 오토레이아웃, 컴포넌트, 베리어블 실습을 했어요
저는 툴팁 만들기가 유용했는데요
말풍선을 만들 때, 말풍선 꼬리를 처리하는게 항상 난감했거든요
꼬리를 프레임 가까이 옮기면 오토레이아웃 때문에
저렇게 안쪽에 배치되는데 이 상태에서 오른쪽의
Position 패널에서 Ignore auto layout 을 눌러주면?!
이렇게 꼬리 요소만 따로 오토레이아웃을 무시할 수 있어요
그래서 프레임 안쪽이든 반쯤 걸치든 마음대로 배치할 수 있습니다
늘 이런 부분에서 난감했던 저는 너무 신박했어요...
🌠👏🌠👏🌠👏🌠👏🌠👏
여기서 중요한 부분이 있는데요
단순히 오토레이아웃을 무시하기만 하면 안 되고,
저 말풍선 안의 내용의 길어지거나 짧아질 때
꼬리가 말풍선에 붙어다녀야 하죠!
그렇기 때문에 다시 꼬리 요소를 선택하고
오른쪽 패널에서 Constraints 속성을 변경해줍니다
Constraints - 기존의 Left + Top 설정을
Right + Bottom 으로 바꿔줍니다!
그러면 말풍선 프레임의 오른쪽 아래를 기준점으로 붙어다니게 돼요!
툴팁의 내용이 길어져도 이렇게 지정된 위치에 자리해요
저한텐 정말 유용했어요
이 부분을 어떻게 해결해야할지 몰랐고,
어떤 키워드로 검색해야 해결방법을 찾을 지도 몰라서
정말 답답했는데 가려운 부분을 긁어준 느낌이라
행복할 정도로 ^^ ㅎㅎ....
이번 차시에서는 반응형과 적응형의 차이에 대해서
주의를 기울여서 수강했는데요
제가 가게 될 회사의 서비스가
웹 기반이긴 하지만 모바일로도 적용될 가능성이
있어보였기 때문이에요...! (물론 직접 써봐야 알겠지만)
특히나 브레이크포인트를 지정하고
이를 개발자분들과 소통하는 방식에 대해서도
알려주셔서 좋았습니다
특히 한 번 알아두면
어떤 서비스든 써먹을 수 있으니 정말 중요하죠!!
++++
그리고 이 점을 계속해서 강조해주셨는데요
*** 반응형 제작하기 전에 무조건 제일 먼저 할 것 ***
디바이스 정하기(pc, 태블릿, 모바일)
이걸 미리 정해두어야 하는 이유
만약에 커뮤니케이션 미스로 중간에 갑자기 변경하게 되면
ex) 웹 기반으로 만들기로 했는데, 개발 이슈로 모바일부터 만들어야하면
1) 처음부터 다시 만들어야 함
2) 열심히 디자인한 레이아웃 무용지물
정말 디자이너로서 낭패죠 🥶
이런 불상사가 없게
가장 처음에 개발자분들과 협의해야합니다!
그래서 거의 대부분의 디자이너 공고에서 요구하는 역량이
커뮤니케이션인가봐요!
다음은 드디어 마지막 수업이자
대망의 포트폴리오 특강입니다....
정말 기쁘네요🥹👏🤍🤍🤍🤍🤍
내일도 화이팅해봅니다...
본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.
#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴
