스케치 서울 쇼케이스 제작
스케치 디자이너 오프 행사를 하다 보면 이것저것 고민 혹은 미련이 남기 마련인데 우선 제일 생각이 나는 건 도메인이 없다는 것이었습니다. 항상 페이스북 커뮤니티나 페이지를 통해 홍보를 해왔는데 간단한 행사 신청 페이지는 있어야겠다고 생각 들었습니다. 스케치 커뮤니티 매니저에게도 행사 보고도 해야 하고..
그래서 우선 간단하게 이벤트 메인 / 이벤트 상세 이렇게 화면 2개만 만들기로 했습니다.
사이트는 아직 제작 중에 있긴 한데 디자인은 먼저 공유해도 좋을 거 같아 어떤 방식으로 접근했는지 공유해 봅니다.
비핸스 바로 가기
서비스의 핵심을 대표하는 와이어 프레임을 그렸습니다.
사실 본 작업은 always dodo라는 해커톤 행사의 영향을 많이 받았습니다. 꽤나 감명 받음.
이전 진행 행사 포스터를 보여주는 건 커뮤니티의 꾸준함도 엿볼 수 있고 의미 있는 부분이라고 생각이 들었습니다.
여기서 신경 쓴 건 CTA를 정말 명확하게 인지시켜 주고 정보 역시 한눈에 쉽게 파악할 수 있도록 해주는 것이 정말 중요하다고 생각했습니다.
굳이 isometric으로 구현할 필요는 없었지만 개인적으로 해보고 싶었습니다.
디자인 포함 영상까지 걸린 시간은 2~3시간 정도 걸린 거 같습니다.
[제작 방법]
1. 스케치에서 2D로 그린다.
2. 그리고 플러그인으로 isometric을 만든다.
*이전에 한번 버전 때문에 구동이 안된 적이 있는데 다행히 개발자가 업데이트 해주심.
현재 버전(54.1)까지 구동됨. 플러그인은 스케치 구조가 크게 바뀔 때 플러그가 작동 안 하는 거 같음. 단순 업데이트로 인해 플러그인 구동이 안 되는 건 아닌 걸 확인.
3. copy svg code로 피그마에 가져와서 아이콘, 텍스트에도 skew 적용 후 다시 스케치로 가져온다.
4. 그리고 xd로 내보낸 후 프로토타입으로 애니메이션을 만든 후(에펙 몰라요 ㅠ) 동영상으로 저장.
하나하나 세밀하게 설명하기엔 복잡하네요 ㅠ
-
서체는 이번에 처음으로 스포카를 써보았습니다.
보통 이런 쇼케이스 작업 시 뻔한 레퍼토리가 서체, 컬러, 아이콘인데 저도 피해가질 못했네요..
개인적인 생각엔 너무 당연한 서체나 컬러는 굳이 언급하지 않아도 될 부분이라 생각합니다.
하나의 아이콘이 모바일, 데스크탑에 최적화되도록 픽셀을 다 맞췄고(요즘 모니터 PPI 높아서 사실 티 안 납니다). svg로 작업했습니다.
스케치 커뮤니티는 각 국가의 도시별로 구성이 되어있습니다. 그래서 스케치 서울이라는 네이밍이 나온 건데 서울을 상징하는 가장 전통적인 심볼은 남산타워라고 생각해서 기존에 작업해 놓은 남산타워를 적용했습니다.
그런데 기존 형태에서 최대한 단순하게 하는 게 쉽진 않아서 하나하나 경량화 과정을 거쳤습니다.
killing part.png타 지역과 차별화를 두기 위해 타이틀 옆에 남산타워를 배치했습니다. 이런 경우엔 아이콘 폰트로 처리하는게 더 나아보이네요.
-
앱은 파란색 단일톤으로 가되 약간의 톤을 지정했고 텍스트 스타일은 최소한의 개수로 줄이려고 최대한 노력했습니다, 이렇게 규격화를 하게 되면 생기는 문제가 규격화 vs 심미성인데 서로 간에 얼마나 양보/배려해야 하는지 밸런스를 맞추는 게 쉽지 않은 거 같습니다. 앞으로 UI를 한다면 풀어야 할 혹은 넘어야 할 과제라고 생각합니다.
그리고 위 이미지에서 스타일 다이어트는 쇼케이스에 넣을 계획에 없었습니다. 제가 저렇게 배열하고 보면서 맞춰가는 게 효율적인 거 같아 시작한 건데 어느 정리하고 나니... 이것도 같이 보여주면 좋겠다 하고 생각이 들었습니다.
처음엔 일반적인 형태 흰색 배경에 콘텐츠를 넣고 스케치 공홈 컬러를 그대로 적용하려 했는데... 뭔가 어색하게 억지로 끼워 맞추는 느낌이 들었습니다. 그래서 목업에나 쓰일법한 파란색을 적용했습니다. 너무 과하게 눈에 띄긴 하지만 스케치 서울은 행사 신청 전용 웹사이트입니다. 그래서 조금 디자이너 관점에서 다른 시도를 해보고 싶었습니다.
초기 디자인 작업
스케치 로고를 스트로크 처리한 건 파란색에 저 노란색이 전혀 어울리지 않더군요...
그래서 일관성있게 흰색으로 비주얼을 통일시켰습니다.
포스터는 개인적으로 제일 맘에 드는 부분인데 이때까지 진행한 행사 이력을 보여주는 건 정말 의미 있다고 생각합니다. 올 해도 다양한 형태로 재미있는 모임으로 찾아뵙겠습니다.
뭔가 이렇게 많아 보여서 실제 화면은 총 4개입니다. 뭔가 있어 보이게? 구성하는 것도 재미있네요.
사실 쇼케이스는 UI 디자인이라기보단 편집 디자인 영역에 더 가까운 거 같습니다. 그리고 UI 잘하는 거랑 이런 유의 쇼케이스 디자인 잘하는 거랑은 전혀 다른 영역이라 봅니다. 이번에 제작한 쇼케이스도 사실 화면 4개밖에 안되는데 이것저것 넣어보니 세로 폭이 25,000px 정도 되네요. (체워넣는건 하기 나름)
이전 행사 사진도 보거나 행사 상세도 보면 좋은데 보유한 데이터가 모두 커뮤니티에 있어서 앞으론 구글폼하고 구글포토만 사용할 계획입니다. 사실 이것저것 필요한걸 넣게되면 행사 알림 이메일 리스트도 넣고 (아 그럼 구독 취소 기능도 있어야 하는군... 그럼... 메일 서버도 필요하고... 아! 그래서 mailchimp가 있었구나 ㅠㅠ) 뭘 하나 하려면 꼬리에 꼬리를 무는지라.. ㅠ 지금은 최소한의 서비스만 생각하고 있습니다.
앞으로 의미 있는 모임으로 찾아뵙겠습니다.
많은 관심 부탁드립니다.
감사합니다.
