SPACE RUMI

Hi, I am rumi. Let's Splattack!

디자인 4

[디자이너 & 퍼블리셔를 위한 가이드 # 4] 브라우저 마다 확인하기 / 폰트 적용 확인하는 방법 / 무료폰트 사이트 / 예쁜 글씨체

지원되어야 하는 브라우저를 확인하자. 크로미움 기반(크롬, 삼성인터넷, 웨일, 엣지, 브레이브 등), 그리고 사파리, 파이어폭스, IE 몇버전 까지를 지원할것인지를 정한다. (2022년 6월, IE서비스는 지원종료 되었으므로 제외). 브레이브 브라우저, Arc 등 다양한 브라우저는 많고, 이걸 쓰는 사람들도 꽤 많다. 디자이너와 개발자 모두 모든 브라우저에서 실제 테스팅을 해보기를 권한다. 의외로 크롬에서 잘 돌아가면 ‘잘 되네요’ 라고 생각할 수 있지만, 사파리에서 안보이는 케이스도 있고, 엉뚱한 위치에 가 있는 케이스가 있다. 특히 사파리는 default 속성값을 명시해 주지않으면 그리지 않는 현상이 종종 있으니 반드시 체크하자. 높이값을 명시하지 않았을 경우 이미지를 그리지 않는 현상도 간헐적으로 ..

[디자이너 & 퍼블리셔를 위한 가이드 #3] 적응형과 반응형 결정하기. 브레이크포인트 정하기. 반응형홈페이지란

일반적으로는 적응형/반응형 여부는 프로젝트 세팅 단계에서 정하고 시작한다. 관리자페이지 처럼 넓은 화면에서 봐야 유용한 웹 같은 경우에는 반응형보다는 적응형으로 가는 편이다. 모바일웹(웹앱)의 작업 여부는 어떻게 되는지도 확인하자. 적응형, 그리고 반응형 웹이란? 적응형이란 모든 디바이스에 균일하게 보이도록 최소 너비를 고정으로 가져가는 방법이고, 반응형이란 디바이스의 폭에 따라 화면이 상이하게 보이는 것이라고 이해하면 쉽다. 적응형 예시) 잡코리아 https://www.jobkorea.co.kr/ 잡다 https://www.jobda.im/ 모바일 화면을 디자인 할때, 스테이터스바와 툴바영역높이를 포함하여 디자인한다. 브라우저 마다 다르게 하단에 띄워주는 플로팅바도 고려하는것이 좋다. 특히 사파리에서는..

[디자이너 & 퍼블리셔를 위한 가이드 #2] 프레임워크나 라이브러리리를 사용할 것인지 확인하자.

프레임워크와 라이브러리 확인하기 사실 디자이너가 프론트 개발 프레임워크와 라이브러리를 반드시 알아야 하는것은 아니다. 하지만 서로 물어보고, 알려주는것이 좋다. React를 사용하고 MUI를 쓸거라면, 디자이너는 UI 라이브러리 홈페이지에 들어가서 어떠한 컴포넌트가 존재하는지, 기본적으로 어떤 형태를 띄고 어떤 속성들을 가지고 있는지를 파악할 수 있다. 프레임워크란? 웹 프론트 개발을 위한 환경 정도라고 생각하면 된다. 최근 자주 사용되는 웹 프론트 프레임워크로는 React, Vue, Svelt 등이 있다. 어떤 프레임워크를 사용하는지를 알아보고, 각 프레임워크에서 주로 사용하는 UI 라이브러리를 쓸건지, 아니면 직접구현 할건지를 사전에 미리 알아두는것만으로도 서로에게 도움이 된다. 아래는 예시다. ex..

[디자이너 & 퍼블리셔를 위한 가이드 #1] 실제 프로젝트 진행 과정 / 프로젝트는 어떻게 진행될까?

프로젝트는 이렇게 진행된다. 하나의 프로젝트는 일반적으로 이렇게 진행된다. [ 아이디어 - 기획 - 디자인 - 퍼블리싱 - 개발 - QA - 배포 ] 아이디어를 가지고 브레인스토밍을 한다. 커뮤니케이션을 통해 도출된 계획이 글로적힌 문서로서 작성된다. 기획자는 이것을 토대로 화면을 정의한 기획문서를 제작한다. 기획문서를 보고 디자이너는 화면을 그린다. 요즘은 피그마가 대세이기 때문에 (어도비가 피그마를 인수하기도 했고) 피그마로 화면을 그려준다. 기획자와 디자이너가 회의를 거쳐 디자인 컨펌이 최종확정이 되면, 완성된 디자인을 퍼블리셔 에게 전달한다. 퍼블리셔는 HTML+CSS + JS로 디자이너가 그려준 화면을 코드로 똑같이 구현한다. 퍼블리셔는 디자이너가 준 작업물을 ‘코드로 그리는’ 역할을 맡는다. ..

반응형