GrotesQ
개요 Overview
다양한 형태의 웹서비스 고도화와 신규 개발 의뢰를 수행하는 스튜디오, 그로테스큐에서 했던 작업들을 소개합니다. UX 디자인을 메인 롤로 두고, 기획과 PM업무를 서브 롤로 수행했습니다.
UI 라이브러리
입사한 시점부터, 디자이너 동료 1명과 함께 착수하는 모든 프로젝트들을 디자인 하면서 작업한 컴포넌트와 시스템을 사내 UI 라이브러리로 정리하고, 쥬니어 디자이너들한테 가이드라인을 줄 수 있는 플러그인이나 디자인 레퍼런스 관련 내용도 기록하는 페이지를 만들었습니다.
이 외에도 피그마의 각 페이지들의 특징과 정보를 개발자와 클라이언트들이 인지하기 쉽게 하기 위해서, 일목요연한 트리구조를 만드는 등 전반적인 사내 디자인 프로세스를 정립했습니다.
레이어 지지 Layer.gg
개요 Overview
레이어 지지는 블록체인과 크립토 경제의 실시간 변동상황을 트레이더들에게 알려주는 웹사이트입니다. 크게는 정보제공과 커뮤니티 교류, 이 두가지 핵심 기능을 제공하면서, 기존의 고객사가 텔레그램을 통해 마이크로 뉴스 형식으로 서비스하던 내용을 정식 사이트화하려는 미션이 있었습니다.
디자인 리서치 Design Research
https://www.notion.so/_09-05-4c29e9be5f8b46aaa6fecd32ca703ae4
디자인 컨셉 Design Concept
<1> 글래스 질감 / 그라디언트 / 홀로그램 / 네온 Glassmorphism / Smooth Gradient / Layer + Shadow Holographic / Neon
-2021년도부터 UX/UI 트렌드로 유행중인 글래스모피즘을 적용해, 투명한 레이어, 그라데이션 컬러를 곳곳에 사용했습니다.
-컬러 구성도 보색 대비를 기반으로 네온 컬러 위주로 사용해 현실세계와 다른 가상의 개념인 크립토 생태계의 분위기를 잘 표현할 수 있게 했습니다.
<2> 클레이모피즘 / 메타버스 / 커뮤니티 친화성 Claymorphism / Metaverse / Community Friendly
-커뮤니티 사용시 유저가 자신을 가상 세계에서 살아 움직이는 캐릭터처럼 느낄 수 있도록, 사이트에서 기본으로 제공하는 3D 일러스트의 프로필 사진을 취향껏 골라쓸 수 있는 연출을 했습니다.
-전체적인 디자인의 인상을 NFT 게임 UI와 유사하게 구성했습니다.
<3> 분할화면 Split Screen Design
-섹션에 따라 컬러를 과감하게 분할해서 사용해서 정보의 성격을 시각적으로 깔끔하게 분리해서 알아 볼 수 있게끔 유도했습니다.
-2021년도부터 UX/UI 트렌드로 유행중인 글래스모피즘을 적용해, 투명한 레이어, 그라데이션 컬러를 곳곳에 사용했습니다.
-컬러 구성도 보색 대비를 기반으로 네온 컬러 위주로 사용해 현실세계와 다른 가상의 개념인 크립토 생태계의 분위기를 잘 표현할 수 있게 했습니다.
<2> 클레이모피즘 / 메타버스 / 커뮤니티 친화성 Claymorphism / Metaverse / Community Friendly
-커뮤니티 사용시 유저가 자신을 가상 세계에서 살아 움직이는 캐릭터처럼 느낄 수 있도록, 사이트에서 기본으로 제공하는 3D 일러스트의 프로필 사진을 취향껏 골라쓸 수 있는 연출을 했습니다.
-전체적인 디자인의 인상을 NFT 게임 UI와 유사하게 구성했습니다.
<3> 분할화면 Split Screen Design
-섹션에 따라 컬러를 과감하게 분할해서 사용해서 정보의 성격을 시각적으로 깔끔하게 분리해서 알아 볼 수 있게끔 유도했습니다.
<4> 방대한 정보의 미니멀라이징 Minimalizing Complexity, but Intensive Visualization
-뎁스를 늘리지 않으면서, 모든 정보를 펼쳐서 늘어뜨리지만은 않는 방식을 고민했습니다. 방대하고 복잡한 정보들로 페이지가 구성되기 때문에, 탭메뉴/토글버튼/페이지네이션을 최대한 활용해서 정보들을 수납했습니다.
<5> 네거티브 컬러 / 다크모드 Split Screen Design
-한번의 많은 정보를 전달해야 하고 실시간으로 업데이트되야 하는 트레이딩 보드의 성격을 고려해, 유저의 피로도를 낮추고 집중도를 높일 수 있도록 반전된 배합과 다크모드를 기본으로 하는 컬러 시스템을 활용했습니다.
-뎁스를 늘리지 않으면서, 모든 정보를 펼쳐서 늘어뜨리지만은 않는 방식을 고민했습니다. 방대하고 복잡한 정보들로 페이지가 구성되기 때문에, 탭메뉴/토글버튼/페이지네이션을 최대한 활용해서 정보들을 수납했습니다.
<5> 네거티브 컬러 / 다크모드 Split Screen Design
-한번의 많은 정보를 전달해야 하고 실시간으로 업데이트되야 하는 트레이딩 보드의 성격을 고려해, 유저의 피로도를 낮추고 집중도를 높일 수 있도록 반전된 배합과 다크모드를 기본으로 하는 컬러 시스템을 활용했습니다.
컴포넌트 Components
페이지 디자인 Pages