SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/Design - 디자인 10

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

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

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

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

소셜로그인 로고 svg 파일 / naver svg 파일 다운로드 / 네이버 로고 다운로드

로그인 페이지를 만들어야할 일이 있어서 아이콘을 찾아다녔는데 왜인지 네이버 아이콘 파일만 없더라. 공식 naver dev 홈에서도 svg 파일이 아니라 png랑 ai 파일을 다운받을수 있었다. 파일 다운받아보니까 2021년 자료던데.. 암튼 피그마 커뮤니티에서도 한참을 서칭하다가 네이버는 블로그 아이콘밖에 없어서 결국 ai파일로 svg 떠서 만들었다. 나같이 네이버 로고 찾아 삼만리 하는 분들을 위해 파일을 첨부한다. 아래 logoSVG 집파일에 구글, 네이버, 카카오, 애플 아이콘 20x20 사이즈 svg파일이 들어있다. + 없는 이유가.. 재배포 금지라던지? 그런 항목이 있는지 모르겠다. (찾아보니 그런건 아닌거같은데) 있으면 누군가 댓글로 알려줬으면 좋겠다.

피그마 커뮤니티 위치

피그마 업데이트 하고나서 커뮤니티 버튼 위치를 옮겼다. 좌측 맨 아래에 있다. 이번 업데이트로 인해 피그마 dev mode라는것이 새로 생겼는데, 실제로 vscode에서 익스텐션 설치해서 사용해보니 꽤 쓸만한 것 같다. 피그마 데브모드 한 일주일간 사용해보고 후기를 적어야겠다. 생각보다 단점이 눈에 보이긴 한데(내가 방법을 못찾은걸지도?).. 장점도 크다. 아무튼 피그마팀 열심히 일해줘서 너무 감사할 따름이다.

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

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

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

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

[디자이너 & 퍼블리셔를 위한 가이드 # 0] 디자이너와 퍼블리셔 들의 고민. 뭘 배워야 해야 하지? 퍼블리싱이란?

나는 신입때 어땠지? UX UI 디자인, 퍼블리싱, 화면개발 등 다양한 포지션으로 프로젝트에 참여하면서 정말 많은 것을 배웠다. 나는 신입때 ‘뭘 알아야 하지?’ ‘이게 맞는건가?’ ‘이것만 미리 알았어도 진짜 좋았겠다' 싶었던 것들을 가르쳐주는 사수가 있었으면 좋겠다고 늘 생각했다. 아쉽게도 그런 사수는 만나지 못했지만, 8년동안의 내 경험이 필요한 사람들이 분명 있을것이라는 마음으로 이 글을 쓴다. 진리의 팀바팀 회바회 사바사(팀마다 다르고 회사마다 다르고 사람마다 다르다)라고 들어봤을것이다. 따라서 절대적인 가이드라는 것은 없다. 함께 일하는 동료들, 그리고 프로젝트 팀의 규칙이 항상 우선시 되어야 한다. 신입이 고민하는것들 중 가장 큰 고민은 아마 ‘내 뭘 알아야 할지 모른다는 것' 일것이다. 이..

내 디자인 능력을 레벨업 시켜줄 유용한 사이트들

그간 디자인을 해오면서 사용했던(방문했던) 유용한 것들을 기록차원에서 아카이빙. 계속 추가하거나 삭제 예정. 모음 디자인 레퍼런스 - 모바일 UXUI 디자인 레퍼런스 (https://screenlane.com/) Screenlane Only the best mobile and web UI design inspiration, right in your inbox screenlane.com - 모바일 UXUI 디자인 레퍼런스 (https://mobbin.com/browse/ios/apps) Browse iOS Apps | Mobbin - The world’s largest mobile app design reference library Browse and search across hundreds of iOS ..

[디자이너 & 퍼블리셔를 위한 가이드 #시작하기] 사전 체크사항 / 디자이너가 알아두면 좋은 것

일전에 디자이너 커뮤니티에 가이드를 공개한 적이 있다. 7년간 프로젝트를 진행해오면서 미리 이런것쯤 체크해뒀으면 좋았겠다 라거나, 혹은 알고있었다면 더 잘했을 텐데 라고 느꼈던 것들을 아주 간단하게 정리해볼까 한다. 자세한 설명은 배포용으로 따로 만들예정이라 일단은 목차 정리차원에서 기록해 두려고 한다. 여러가지가 많이 바뀐것도 있고. 별도의 UI 프레임워크를 사용할것인지 물어보자. vue를 사용한다면 vuetiry나 vuesax 등을 사용하는지 물어보자. 혹은 별도의 component library를 염두해두고 있는지 확인하자. 부트스트랩 이라든지, Ant-design 이라든지, material UI 라든지. 적응형인가, 반응형인가? Break Point는 어떻게 나눌것인가? 디바이스별로 어떻게 보여줄..

[figma] 피그마 커뮤니티 인기순 소팅 방법

피그마 커뮤니티 피그마 커뮤니티에는 많은 공유 자료들이 있다. 자료가 풍부하여 이를 잘 활용하면 더 나은 디자인을 할수있기때문에 많은 디자이너들이 커뮤니티를 애용하고 있을것이다. 아마도. 인기있는 플러그인이나 디자인, UI kit를 빠르게 찾을수있는 방법을 알아보자. 우선 커뮤니티에 들어간다. https://www.figma.com/community Explore에는 메인화면처럼 전체적인 항목들을 보여준다. 피그마 커뮤니티 플러그인 인기순 테이블 Installs 헤더를 클릭하면, 다운로드가 가장 많이된 플러그인 순으로 소팅해준다. 첫 진입 화면에서 소팅 아이콘 표시(화살표)가 없기 때문에 클리커블한 영역인지 모를수도있는데, 테이블 UI의 암묵적인 요소이니 알아두면 좋다. (아이콘을 노출시키는곳도 많다) ..

반응형