슈프림 블로그

저번 시간에는 컴포넌트 활용법에 대해 알아봤다. 컴포넌트는 한마디로 대표 하나만 바꾸면 자식 인스턴트들까지 한번에 변경할 수 있는 것을 말한다! 이번에는 오토레이아웃을 활용하여 구성요소의 크기가 변해도 반응적으로 대응할 수 있는 방법에 대해 알아보자! 피그마는 UI/UX 디자인 툴이다. UI/UX는 디바이스 화면에서 보여지는 것이기 때문에, 디바이스 크기가 모두 달라서 각 화면에 맞는 디자인 가이드를 제시해주어야 한다. 일일이 모든 디바이스에 대한 화면을 그리는 것 보다, 오토레이아웃을 적용해두면 자동으로 달라지는 화면에 맞게 변하게 되니 편리하게 사용할 수 있다! 오늘은 오른쪽 디자인 탭에서 Auto layout과 Constraints 부분에 대해 알아 볼 예정이다. 대표이미지 모양 만들기 우선, 전에..

포스팅 내용을 한 눈에 파악하도록 하는 방법! 각 포스팅에 썸네일 대표 이미지를 지정해주면 된다. 구글링 했을 때 썸네일과 함께 내용이 보여지기 때문에 조회수에 아주 중요한 역할을 한다. 이 블로그에 보면 이렇게 썸네일 대표 이미지들이 있다. 썸네일은 깔끔한 폰트와 한눈에 들어오는 사이즈로 만드는 것이 가장 중요하다고 생각한다. 추가로, 나는 카테고리별로 색상을 다르게 지정하여 어떤 주제를 다루고 있는지 파악하기 쉽게 했다. 예전에 네이버 블로그를 쓸 때는 이 이미지들을 파워포인트로 만들었다. 그러다보니 사이즈와 컬러, 폰트 등이 들쭉날쭉해져서 통일성이 사라졌다ㅠㅠ 티스토리로 넘어오면서 만들기 번거로워서 한동안 대표 이미지 없이 글을 올렸었는데, 피그마가 대표 이미지 만들때 사용해보면 아주 딱일 것 같아..

얼마 전에 동아리에서 Figma라는 툴을 접하게 되었다! 협업과 리소스 관리에 아~주 유용한 UI GUI 디자인 툴이다. 사용해 보니 진짜 편리하고, 신기한 기능이 많았다! 애용하게 될 것 같다👍👍 Figma ▼▼▼ www.figma.com/ ▼▼▼ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 특징 웹 + PC 앱(Window, Mac) 일단 피그마의 큰 특징으로는, 윈도우와 Mac에 네이티브 앱을 설치해서 빠른사용이 가능하며 PC 앱이 없더라도 웹 브라우저 기..