FE/Styling4 모바일 UI 디자인 시스템과 프론트엔드에서 디자인 시스템 적용하기 💭 서론요즘 휴대폰의 화면비율은 정말 다양하다.미니 사이즈의 선호도가 줄고 휴대폰의 평균 사이즈가 커졌어도 작은 기종을 고려하지 않을 수 없다.어떤 기기는 세로 길이가 667px 정도로 작고, 어떤 기기는 882px 이상으로 꽤 크다.그래서 디자인 시안을 바탕으로 프론트엔드 개발을 하다 보면 이런 고민이 생긴다.UI 요소 크기는 작은 화면 기준으로 해야 할까? 큰 화면 기준으로 해야 할까?작은 사이즈에서는 페이지 디자인이 "예뻐"보이는데 큰 사이즈에서는 적절하지 않아보인다면.. 어떻게 해야할까? 고민을 바탕으로모바일 UI를 디자이너 관점에서 어떻게 설계하는지그리고 프론트엔드에서 디자인 시스템을 어떻게 구현하는지를 가볍게 정리해보았다. 1. 모바일 UI는 어떤 화면 기준으로 디자인할까?웹 디자인을 배워보.. 2024. 1. 20. CSS position: sticky 제대로 이해하기 (왜 고정이 안 될까?) 💭 서론여태 브라우저의 헤더나 하단 바를 만들 때는 보통 position: fixed를 사용해왔다. 그런데 무신사나 지그재그 웹 브라우저처럼 레이아웃이 모바일 사이즈(max-width)로 고정된 구조에서는fixed를 사용하면 요소가 max-width로 제한된 레이아웃을 벗어나 좌우 바깥으로 튀어나오는 현상이 생긴다.( fixed는 뷰포트 기준으로 고정되기 때문 )지그재그 웹을 살펴보니 헤더에 position: sticky가 사용되고 있었다.그래서 같은 방식으로 sticky를 적용해봤지만 고정이 안 됐다.같은 sticky 속성을 사용했는데 왜 고정이 안 될까?원인을 찾는 과정에서 별거 아닌 내용일 수도 있지만 작은 CSS 동작 원리를 하나 새롭게 알게 되어 정리해본다. 결론)position: stick.. 2023. 12. 12. 사용자 관점의 UI 구성하기 💭 서론인턴십 기간 동안 실제 프로젝트에 투입되진 못했지만 우리 부서가 개발 중인 서비스의 유사 서비스 업체의 랜딩페이지 클론 업무를 하게 되었다.업무를 진행하며 어쨌든 내게 주어진 일이다보니 구현에 급급했는데, 팀장님께서 구현하는 것에만 급급해 하지 말고 레이아웃 목업부터 시작해 사용자 관점을 생각해보라고 피드백을 주셨다.기억에 많이 남는 피드백이었어서 따로 기록해본다. 1. 어설픈 반응형 보단 스크롤 적용을완전한 반응형 구현에 미숙했던지라 뷰의 사이즈에 따라 컨텐츠가 잘려 보이지 않는 순간들이 존재 했었는데,반응형보다 우선시 되어야 할 것은 사용자가 보는 컨텐츠는 어느 순간에도 보이지 않으면 안 된다는 것이다.따라서 어설픈 반응형을 구현하려다 컨텐츠 안 보임 이슈를 발생시키지 말고 min-width.. 2023. 9. 5. HTML, CSS로 토글 버튼 만들기 🤩 완성본 먼저 보기 CSS 수업을 들으며 transition 속성을 가지고 여러 응용 실습을 해봤는데 그중 토글 버튼은 따로 기록하고자 한다! 프로젝트 할 때 팀원 언니가 토글버튼 만들었어서 나도 만들어 보고 싶었다 ㅎㅎ HTML과 CSS만으로 정적으로 만든 버튼이라 실제로 데이터를 내보내려면 자바스크립트가 들어가고 다소 복잡해지겠지만 궁금했던 버튼 구현 하나 해봤다는 것에 의의를.. 💪🏻 1. HTML 작성 on/off 아무런 스타일이 입혀지지 않은 화면은 위와 같이 체크박스와 라벨 태그 뿐이다. CSS로 모양을 잡아주는 것! 2. CSS 작성 /* 체크박스 */ #toggle-slider { display: none; } label { text-indent: -999em; cursor: pointe.. 2023. 6. 9. 이전 1 다음
