회원가입을 하면 원하는 문장을
저장할 수 있어요!
다음
AWS 월 서버 비용이 부담되시나요?
처음 와이어 프레임을 제작할 때, 가장 어려웠던 것은 일관성 있는 아이콘을 삽입하는 일이었습니다. 피그마나 스케치 같은 툴도 없었고, 아이콘도 검색을 통해 하나씩 찾아내야 하는 과정이 많았습니다. 다행히 와이어 프레임의 역할은 실제 사용자를 만나는 것이 아니기에 조금씩 다른 모습이어도 큰 문제는 없었지만, 와이어 프레임을 실제 화면으로 구성할 당시는 달랐습니다. 디자이너가 포토샵으로 아이콘을 하나씩 수정하여 제작하는 과정은 꽤 복잡하고 어려워 보였기 때문입니다. 물론 지금은 환경이 많이 달라졌지만, 원하는 아이콘이나 일러스트를 상황에 따라 찾고 이를 원하는 수준으로 맞추는 일은 특정 툴의 도움을 받아야 합니다.
회원가입을 하면 원하는 문장을
저장할 수 있어요!
다음
회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!
확인
처음 와이어 프레임을 제작할 때, 가장 어려웠던 것은 일관성 있는 아이콘을 삽입하는 일이었습니다. 피그마나 스케치 같은 툴도 없었고, 아이콘도 검색을 통해 하나씩 찾아내야 하는 과정이 많았습니다. 다행히 와이어 프레임의 역할은 실제 사용자를 만나는 것이 아니기에 조금씩 다른 모습이어도 큰 문제는 없었지만, 와이어 프레임을 실제 화면으로 구성할 당시는 달랐습니다. 디자이너가 포토샵으로 아이콘을 하나씩 수정하여 제작하는 과정은 꽤 복잡하고 어려워 보였기 때문입니다. 물론 지금은 환경이 많이 달라졌지만, 원하는 아이콘이나 일러스트를 상황에 따라 찾고 이를 원하는 수준으로 맞추는 일은 특정 툴의 도움을 받아야 합니다.
오늘 소개할 'Shape'은 매번 다른 곳에서 비슷한 맥락의 아이콘을 찾기 어려운 상황, 취향에 맞게 수정하기 위해 많은 시간을 투자하는 것을 개선하고자 만든 서비스입니다. 현재는 애플은 물론 페이스북, 에어비앤비, 구글 등에서도 사용하는 웹서비스입니다. 'Shape'에서는 상황 별 아이콘과 일러스트(GIF 포함)를 원하는 컬러 조합, 크기, 움직임 등에 따라 편집해, 동일한 스타일의 여러 결과물을 동시에 내려받을 수 있습니다. 지금부터 관련 기능을 하나씩 살펴보겠습니다.
'Shape'에서 제공하는 편집 대상은 크게 4가지로 나뉩니다. 기본적으로 아이콘과 일러스트가 있으며, 이 둘을 각각 동적인 형태로 확인, 편집할 수 있는 기회도 얻을 수 있습니다. 즉, 아이콘과 일러스트를 다양한 카테고리에 따라 기본 제공하며 이는 다시 움직이는 모습으로 확인, 편집해 활용할 수 있습니다. 앱/웹 화면에서는 로딩 애니메이션 등 동적인 요소가 자주 쓰이는데, 정적인 아이콘 대비 찾거나 제작하기가 훨씬 까다로울 수밖에 없는데요. 이곳에서는 같은 스타일로 완성된 정적이고, 동적인 아이콘과 일러스트를 함께 편집할 수 있다는 장점이 있습니다. 이 부분이 'Shape'의 가장 큰 차별점이기도 합니다.
아이콘과 일러스트는 각각 10개 이상의 카테고리로 구분되어 있으며, 각 카테고리에는 다양한 종류의 내용이 포함되어 있어 서비스에 사용할 경우, 대부분의 상황에 해당하는 내용을 어렵지 않게 찾을 수 있습니다. 편집 기능이 잘 갖춰져 있어도 제공되는 아이콘이나 일러스트가 부족할 경우, 계속 사용할 이유가 없어지지만 이곳은 기본 제공되는 수가 많고, 계속 업데이트된다는 점이 매력적입니다.
먼저 아이콘 전체를 기준으로 편집 화면을 살펴보겠습니다. 편집 화면 구성은 위 이미지에서는 빠졌지만 왼쪽에 아이콘, 일러스트 등 원하는 편집 대상을 선택할 수 있는 메뉴가 위치하며, 가운데는 선택한 편집 대상(아이콘 - 전체, 아이콘 - 커뮤니케이션 등) 리스트가 있습니다. 마지막으로 오른쪽에 스타일, 사이즈, 선 굵기, 컬러 구성, 내보내기 등의 도구가 자리 잡고 있습니다. 편집 대상을 고르고, 실제 모습을 확인한 뒤, 원하는 조건을 추가하는 흐름에 따라 화면이 구성된 것을 알 수 있으며, 컬러 등을 변경할 때마다 적용 모습을 바로 확인할 수 있습니다.
편집 조건은 다양하지만, 실제 편집 과정은 크게 어렵지 않습니다. 우리가 유사한 툴을 사용하며 학습하거나, 경험한 내용을 바탕으로 충분히 진행할 수 있기 때문입니다. (1) 먼저 아이콘 스타일을 선택할 수 있습니다. 스타일은 아웃라인만 강조, 한 가지 컬러만 사용, 여러 컬러를 사용 등 아이콘을 어떤 스타일에 따라 구성할지 선택하는 과정입니다. (2) 사이즈와 선 두께도 숫자 단위로 변경할 수 있습니다. (4) 그리고 3개 이상의 컬러를 각각 선택할 수 있습니다. 컬러는 프리셋으로 제공되는 컬러 조합을 선택할 수도 있고, 직접 세 가지 이상의 컬러를 선택해 적용할 수도 있습니다. 조건을 변경하거나 추가하면, 바로 그 모습을 확인할 수 있습니다.
앞서 살펴본 편집 과정이 아이콘 '전체'에 해당하는 작업이라면, 특정 아이콘을 선택해 팝업 상태로 편집을 진행하는 것도 가능합니다. 이때 제공되는 편집 도구는 동일하지만, 스타일을 더 직관적인 모습으로 팝업 하단에서 확인하며 작업할 수 있습니다. 아무래도 컬러보다 '스타일'이 중요한 기준이 되기 때문에, 저는 필요한 아이콘을 몇 개 찾은 뒤 하나의 아이콘을 기준으로 편집 작업 후 전체 아이콘에 적용하는 방법을 활용하고 있습니다.
편집 방법부터 소개했지만, 사실 편집 전 아이콘 탐색 과정이 재밌습니다. 그만큼 다양한 종류의 아이콘이 제공되기 때문입니다. '커뮤니케이션'에 해당하는 아이콘만 해도 위의 이미지와 같이 여러 상황에 맞춰 제공됩니다. 사각형 메시지에 해당하는 아이콘을 기준으로 보면 최소 20개 이상이 제공됩니다. 덕분에 상황을 아주 작게 나눠도 이곳을 통해 맞춤형 아이콘 확인 및 편집, 활용이 가능합니다.
정적인 아이콘은 물론 동적인 아이콘 역시 편집할 수 있습니다. 각 아이콘에 마우스를 가져가면 어떻게 움직이는지 모습을 상세히 확인할 수 있습니다. 일반 아이콘에 비해 개수는 적지만, 일반적으로 서비스를 사용하는데 필요한 내용은 대부분 포함되어 있습니다.
다만 움직임이 포함된 아이콘은 편집 방법에도 약간의 차이가 존재합니다. 일반 아이콘은 주로 스타일에 초점이 맞춰져 있었는데, 동적인 아이콘은 움직이는 '속도'에 집중하기 때문입니다. 그래서 가장 먼저 'GIF Speed' 설정이 자리 잡고 있으며, 1X, 2X 등으로 속도를 늘리거나 줄일 수 있습니다. 이 설정값이 변경되면 왼쪽으로 아이콘의 움직임이 어떻게 달라지는지 바로 확인할 수 있습니다. 그 외 컬러는 동일한 방법으로 설정합니다.
위에서 살펴본 아이콘과 같은 방법으로 일러스트를 편집할 수 있습니다. 제공되는 종류가 다양함은 물론, 편집 방법이 동일하게 적용되어 있어 편리합니다. 방법이 달랐다면 비슷한 맥락의 작업을 하는 데 있어 각기 다른 학습 과정을 거쳐야 하기 때문입니다.
일러스트도 스타일과 사이즈 및 선 두께 그리고 컬러 구성에 따라 편집 도구를 사용할 수 있습니다. 다만 아이콘에 비해 구성이 복잡한 경우가 있어, 스타일과 컬러를 잘못 선택하면 대상을 명확하게 알아보지 못할 수 있으니 조금 더 자세히 들여다볼 필요가 있습니다. 실제로 위 이미지를 보면 스타일과 컬러를 잘못 지정해, 같은 일러스트임에도 전혀 다른 모습처럼 보이는 것을 확인할 수 있습니다
.
개별 편집 기능도 제공됩니다. 개인적으로 일러스트는 개별 편집 화면을 더 자주 활용하게 됩니다. 큰 사이즈로 변경된 모습을 볼 수 있으며, 안쪽으로 작게 들어간 '선' 단위가 더 명확하게 구분되기 때문입니다. 전체 일러스트를 보면서 컬러 등을 변경하기보다, 가능하다면 하나의 일러스트를 선택한 뒤 원하는 조건을 하나씩 추가하는 것이 더 좋은 방법입니다.
카테고리를 살펴보니 역시 다채롭게 제공되고 있습니다. 위 일러스트는 '사람' 카테고리에 포함된 것으로, 여러 상황을 포함하고 있습니다. 계절 속 사람이나, 행동에 따른 사람 모습 등이 담겨 있습니다. 일러스트는 상황을 더 구체적이고 넓은 범위에서 보여줄 수 있어, 이렇게 많은 수가 제공된다면 서비스 성격에 따라 사용할 수 있는 범위가 다양해집니다.
앞부분의 설명을 통해 이미 눈치챈 분들도 있겠지만, 일러스트도 '움직임'이 포함된 내용을 따로 보고 편집할 수 있습니다. 로딩, 상황 별 장면 등 여러 카테고리에 따라 확인이 가능합니다. 특히 로딩에 해당하는 일러스트만 20개 이상 확인할 수 있어 편리합니다. 보통은 로딩 애니메이션에 필요한 대상을 찾기가 쉽지 않기 때문입니다.
개인적으론 아이콘과 일러스트를 정적인 것과 동적인 것으로 나눠 다양하게 확인할 수 있다는 점이 가장 마음에 듭니다. 그만큼 다양한 상황과 맥락을 커버할 수 있다는 것을 의미하기 때문입니다. 또한 보편적으로 크게 다르지 않은 편집 도구를 제공해, 별다른 학습을 필요로 하지 않아 누구나 쉽게 상황에 맞는 아이콘이나 일러스트를 편집할 수 있다는 것도 장점입니다. 특정 스타일에 따라 잘 정리된 아이콘과 일러스트가 필요하다면 이곳을 추천합니다.
다만 무료 버전은 개인적인 용도로만 사용할 수 있으니 제공되는 아이콘이나 일러스트를 편집해 미리 테스트해 본 후, 필요한 경우 유료 버전을 고려해 보세요. 유료 버전에는 다양한 포맷으로 다운로드하거나 더 많은 아이콘과 일러스트 확인, 상업적 목적으로의 이용 범위가 포함됩니다.
<참고 자료>
Shape: https://shape.so/
요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
AI는 사용자와의 대화에서 생각보다 많은 것을 파악하고 있다. 최근 연구에서는 단 2시간만 대화해도, AI가 인간 사용자와 80% 이상 유사한 의사결정을 내리거나 성격 테스트를 수행할 수 있다는 결과가 나왔다. AI가 인간과 나눈 대화 데이터를 기반으로 사용자의 성격, 성향, 가치관을 복제할 수 있다는 의미다. 그렇다면 지금까지 GPT와 대화한 내용을 토대로 내 디지털 트윈(Digital Twin)을 만들어, 이를 대상으로 사용자 인터뷰를 진행해 보면 어떨까? 과연 나와 비슷한 생각을 이야기할까?
바야흐로 디자인 시스템의 시대다. UX/UI를 조금이라도 다뤄본 사람이라면 디자인 시스템을 모르는 경우가 드물고, 실제로 경험해 본 사람도 많아졌다. 이제는 신입 디자이너의 포트폴리오에서도 디자인 시스템 작업이 포함된 사례를 흔히 볼 수 있다. 디자인 시스템이 디자이너의 필수 코스가 된 이유는 단연 피그마의 등장과 발전 덕분이다. 피그마는 디자이너의 업무 방식을 짧은 시간 안에 급격히 바꿔놓았다. 불과 3~4년 전만 해도 포토샵이나 일러스트레이터로 웹디자인을 하던 나로서는, 지금처럼 개선된 디자인 환경이 반갑기도 하지만 한편으로는 갈수록 도구를 다루는 테크니션으로서의 디자이너만 양산되는 듯한 현실에 아쉬움이 남는다. 이번 글에서는 디자인 시스템을 왜 ‘디자인’이라고 보기 어려운지, 그 이유와 생각을 정리해 보고자 한다.
웹 접근성은 서비스가 다양한 사용자의 요구에 맞춰 설계되어 있는지 여부를 평가하는 중요한 요소입니다. 그중 명암비는 ‘텍스트와 배경 간의 대비’를 나타내며, 이는 사용자가 콘텐츠를 읽고 이해하는 데 큰 영향을 미치는 중요한 고려 대상입니다. 하지만 디자인을 하다 보면 웹 접근성을 준수하는 것이 항상 쉬운 일은 아니라는 점을 알게 됩니다. 이번 글에서는 실제 서비스에서의 웹 접근성과 명암비 적용 사례를 분석했습니다. 토스, 당근, 네이버, 유튜브, 애플, 순서대로 5가지 상용 서비스의 명암비를 분석하고, 이를 기반으로 웹 접근성 디자인 전략의 중요성과 그 방법에 대해 다루고자 합니다. 디자이너와 개발자가 웹 접근성을 이해하고 적용하는 데 도움이 되기를 바랍니다.
언제부턴가 우리들 마음속 한편을 불편하게 만드는 것이 있습니다. 바로 오늘의 주인공 ‘양자컴퓨터’입니다. AI에 이어 차세대 기술로 주목받고 있지만, 그 복잡한 개념 때문에 이해를 포기하는 분들이 많은데요. 그래도 이제 더 이상 양자컴퓨터 공부를 미룰 수 없습니다. 세계 각국의 기업들과 연구기관들이 양자컴퓨터 개발에 총력을 기울이며, 작지만 의미 있는 성과들도 하나둘 나타나고 있기 때문입니다. 오늘은 아직까지 양자컴퓨터가 생소하신 분들을 위해 최대한 쉽고 간단하게 그 개념을 설명해 드리고자 합니다.
어느 날, 지라(Jira) 백로그에 “개발자들이 문서 작업을 하고 있는지” 확인하는 댓글이 달렸습니다. 상사의 댓글에 어떻게 대응해야 할지 팀원들과 고민에 빠졌습니다. 사실, 그전까지만 해도 저희 팀은 개발 작업 이후 문서 작업을 하지 않고 있었습니다. ‘필수(Must-have)’가 아닌 ‘하면 좋은(Nice-to-have)’ 업무로, 우선순위 낮은 작업 중 하나로 관리되고 있었습니다. 하지만 터닝포인트가 생겼습니다. 최근 시작한 프로젝트로 다양한 국적의 개발자들과 협업이 많아진 것입니다. 개발에 대한 보다 명확한 의사소통을 할 수 있는 문서(Documentation)의 필요성에 대해 모두가 공감하기 시작했습니다. 하지만, 여전히 개발자들의 문서 작업을 독려하기에는 큰 어려움이 있었습니다.