위어드섹터 공식 블로그

디자인 시스템 내에는 컬러, 타이포, 아이콘, 쉐도우, 그리드, 버튼, 테이블 등 ,, 여러 가지로 제한할 수 있습니다. 저는 그중에서도 복잡한 디자인 시스템을 어떻게 규정할 수 있을까에 대해 집중해 보았는데요. 그중에서도 Figma의 Variants 기능을 무수히 많이 사용해 보면서 알아낸 것들을 간단한 프로세스 5단계로 공유하고자 합니다. Q. 디자인 시스템의 무수한 경우의 수를 어떻게 정의할 것인가요? 🤯 버튼 시스템 경우 고려할 사항 사이즈 별 다른 UI 상황마다 다르게 쓰이는 UI 아이콘이 있는 경우와 아닌 경우로 변형될 수 있는 UI A. Variants 기능을 5단계로 적용해본다. 😆오늘 5단계로 해볼 수 있는 variants기능을 구조로 요약하자면 아래와 같습니다. 1. 시스템에 들어갈 속..

안녕하세요 ! 디자이너 JJ입니다. 저번 글에서는 Figma에서 가장 유용하게 사용할 수 있는 Component에 대해 알아봤으니 이번 글에서는 그 Component를 활용하는 Variants기능에 대해 알아보겠습니다.🧐 1. Variants란 무엇일까요? Variants란 변형이란 뜻으로 컴포넌트들을 조합하여 컴포넌트 세트를 만들어 좀 더 체계적으로 사용하는 기능입니다. 이 기능을 사용하여 토글버튼의 on/off상태를 만들 수도 있고 버튼의 Default, hover, focus, disabled를 사용할 수 있습니다. 예를 들어 이런 토글을 사용할때 각각의 컴포넌트를 만들어 사용하기보단 컴포넌트에 variant 속성을 부여해 하나의 컴포먼트로 토글의 [on/off]를 사용하는 것이 더 편리합니다. 2..

광고는 어떤 식으로 기획이 되고 실행이 되는지 아시나요? 페이스북 광고의 실행 과정은 크게 4가지로 나뉩니다. 이 중 광고의 뼈대가 되는 광고 기획을 세우는 법에 대해 정리해 보았습니다. I 광고 기획 모든 작업에는 기획 단계가 존재합니다. 광고에도 당연히 기획이 존재하는데요, 어떤 내용을 정해야 할지 정리해보았습니다. 광고기획에서 가장 중요한 3가지는 아래의 3가지입니다. 타겟 목적 컨셉 우리가 광고를 할 때 누구를 타겟으로 하느냐에 따라 광고의 컨셉과 메세지를 어떤 이미지로 전달해야 할지가 정해집니다. 예를 들면 타겟이 20대라면 지루한 내용보단 최신 유행어나 짤 등을 이용하여 흥미를 유발하는 게 우선시 됩니다. 40,50대 사장님이라면 이벤트나 내용을 강조하는 방향으로 기획이 정해집니다. 저희 데이..

UI에서 색상이 주는 의미와 중요성에 대해 공부해보았습니다. UI에서 색상이란 사용자에게 디자인을 직관적으로 이해시킬 수 있는 강력한 시각 요소입니다. 색상이 잘못 사용된 디자인은 사용자에게 혼란을 주고 서비스의 집중도를 떨어트립니다. UI에서 색상만 제대로 사용해도 사용자를 원하는 방향으로 이끌어 줄 수 있습니다. I 색상의 용도와 해석 색상은 어떠한 이미지와 의미를 같이 동반합니다. 문화에 따라 색을 해석하는 경우가 다를 수는 있지만 공용적으로 색이 나타내는 의미가 있는데 이를 안전색채라고 부릅니다. 안전색채란 색으로부터의 연상과 상징을 이용해 위험을 제거하거나 예방하기 위해 만들어진 색입니다. 표준에 따르면 빨강은 오류, 금지 위험을 노랑은 주의, 녹색은 진행, 안전을 의미하는 것으로 정해져 있습니..

안녕하세요. 위어드섹터 하영 매니저입니다. 벌써 여름이 지나고 가을이 다가오고 있네요. 날씨가 많이 시원해졌더라구요! 오늘은 가을 날씨만큼 시원시원한 분을 소개해드리려고 합니다 :) 이번 인터뷰 주자는 위어드섹터의 단호박 장현주 디자이너님 입니다. Q1 안녕하세요. 장현주 매니저님, 간단한 소개 부탁드릴게요 : D A1 안녕하세요. 위어드섹터에서 UI/UX 디자인을 맡고 있는 장현주입니다! Q2 위어드섹터를 합류하시게 된 계기가 있을까요? A2 취업준비를 위해 학기 중에 다양한 대외활동을 알아보다가 미니 인턴을 통해 위어드섹터에 지원하게 되었어요. 처음엔 붙을 거라 생각지도 못했어서 면접자로 선정되었다고 했을 때 굉장히 떨떠름했던 기억이 나네요,, 면접을 보면서 회사가 가지고 있는 목표와 비전 그리고 출..

보통 개발자라면 전문적으로 배우지 않아도 소프트웨어에 대한 기초개념과 지식을 자연스럽게 습득하게 됩니다. 그러나 디자이너에겐 생소한 단어와 정의가 많습니다. 오늘은 소프트웨어 회사에서 일하는 디자이너를 위한, 사실은 기본적으로 알고 있으면 좋은 소프트웨어 기초지식을 소개하고자합니다. I 하드웨어와 소프트웨어는 무엇인가? 하드웨어 : 손으로 만질 수 있는 형태가 있는 장치 소프트웨어 : 손으로 만질 수는 없지만 하드웨어를 움직이게 하는 명령어들의 모임 초기 소프트웨어는 하드웨어를 효과적으로 사용하기 위한 수단이었습니다. 그러나 기술의 발전으로 현재 소프트웨어는 우리 생활에 없어서는 안 될 정도로 큰 부분을 차지하고 있습니다. 효율성을 높이기 위해서라도 소프트웨어의 발전은 필연적인 과정이었다고 생각합니다. ..

데이터 너겟 서비스의 UI화면을 디자인하던 도중 버튼에 인터랙션을 넣는 방법을 알아보았습니다. 그전에 XD에서 인터랙션을 넣어야 하는 이유는 무엇일까요? 디자이너가 머릿속에서 상상하는 인터랙션을 개발자 또는 퍼블리셔에게 설명하는 것은 생각보다 어렵습니다. ‘슈-욱 하게 올라오다가 빡!하고 버튼이 눌리는 느낌’이라고 설명하면 스스로의 설명에 현타가 오기도 하고 원하는 방향대로 개발자가 이해하지 못하는 경우도 많습니다. 이런 이유로 원하는 인터렉션이 있을 때는 최대한 구현을 해서 개발자에게 전달하는 게 좋습니다. 다른 툴에 비해 어도비 XD같은 경우에는 애프터이펙트나 플래시 등을 배우지 않고도 손쉽게 인터랙션을 넣을 수 있어 어도비 XD의 인터렉션을 넣는 방법을 찾아보았습니다. 제가 이번에 서비스 화면에 넣..