캐치딜 백엔드 개발이야기 : 디자이너와의 협업

• 소개

캐치딜 서비스는 2019년 10월부터 시작된 토이프로젝트의 일환으로, 같은 대학 주니어 대학생 3명이서 똘똘뭉쳐 제작된 프로젝트입니다.

캐치딜은 여러 플랫폼(뽐뿌, 클리앙 등)에 퍼져있는 핫딜특가 데이터를 Selenium 크롤링을 통해 데이터를 수집해서 보여주는 서비스입니다.

 

 

• 디자이너와의 협업

프로젝트 개발에 있어 디자이너는 꽃 같은 존재입니다.

아무리 내부가 탄탄한 컨텐츠 일지라도, 예쁘게 보여지지 않으면 사람들은 사용을 안하기 마련이죠..ㅠㅠ

 

이번 프로젝트 역시 결정적으로 빛을 발하게 해준 역할이 디자이너가 아닌가 싶습니다.

 

과거 '대동제 축제' 사이트 개발 때 디자이너가 그린 시안

이 디자이너는 가끔 저희와 함께해온 동생으로서, 가끔 '디자이너와 함께 협업해보고싶다' 라는 생각이 문득 들 때 신기하게도 기회가 잡혀져서 함께 프로젝트를 해오곤 했습니다.

 과거 프로젝트 개발기  강원대학교 대동제 축제사이트

 

그리고 이 동생이 재밌는게, 대충 '이렇게 이렇게 해줘' 라고 말로만 전해줘도 저희 개발자 모두가 흡족할만한 디자인 시안을 던져줘가지고 창의성도 정말 대단했습니다.

 

이번 캐치딜 프로젝트에서도 이 동생이 합류하게 되어서 프로젝트를 함께하게 되었습니다.

 

 

• 디자이너에게 의뢰

일단 디자이너에게 뭔가 그림을 의뢰할 땐 두 가지 종류로서 의뢰가 오갔습니다.

 

1. '이런저런 느낌으로 해줘'

이건 프론트 개발을 맡는 형이 주로 하는 스타일인데 디자인 시안 자료가 필요하면 참고 그림자료와 함께 '이런저런 느낌으로 해줘' 라는 요청을 합니다.

 

그럼 신기하게 살짝 추상적인 요구임에도 불구하고 디자이너는 이를 어떤 느낌으로 해야할지 의도를 다 캡쳐해낸 후, 시안을 짜내서 보여줍니다.

 

디자이너가 짜낸 프로토타입 시안

그리고 프론트 개발자는 이를 기반으로 조금만 다듬어서

 

프론트 개발자(앱)가 최종적으로 만들어낸 디자인

위와같이 짠 하고 잘 만들어냅니다!

 

 

2. 묘사를 통한 의뢰

저같은 경우, 뭔가 요청에 있어 글로 표현을 잘 못하는 경항이 있다보니 디자이너에게 의뢰할 때 있어선, 조금 조심스러운 경향이 있었던 것 같습니다.

 

디자인 의뢰에 있어 의뢰자의 30초 요청은 디자이너에게는 30분이 될 수도 있거나 1시간이 될 수 있습니다. 또 중간 수정과정에 있어서도 최소화를 해줘야 할 필요가 있습니다. (수정과정이 계속 있을수록 서로가 지칩니다.)

 

저 같은 경우, 하루는 캐치딜 인트로 페이지를 꾸밈에 있어서 몇 가지 그림자료가 필요한 상황이 있었습니다.

 

 

1) SALE 종이를 쥐고있는 손

홍보페이지에 있어 캐치딜이 할인 데이터 정보를 가져온다는 소개와 함께, 뭔가 할인정보를 가득 담아온다는 느낌의 일러스트가 필요한 상황이었습니다.

 

배너 내 일러스트를 통한 일러스트 (* 배너 : 배달의민족)

저같은경우는 타 기업의 배너 내 일러스트를 참고해서 '이런 느낌으로 부탁한다' 라고 요청을 했습니다.

그래서 그 결과로 나온 일러스트는

위 그림이었습니다 ㅎㅎ

진짜 바로 보고 만족을 외쳤습니다!

 

2) 알림벨에 반가워 하는 캐치

홍보페이지에 있어 키워드 알람에 대한 소개가 필요한 상황이었습니다. 이번에는 뭔가 알림에 반응하여 반가워하는 캐치에 대한 묘사가 필요했습니다.

 

 

처음에는 저도 클라이언트 스타일처럼 단순히 말로만 부탁을 했었습니다.

그런데 그 결과..ㅠㅠ

 

캐.. 캐치야??

캐치가 너무 극적으로 좋아해가지고 저를 설득시키기 Failed....ㅠㅠ

단순한 말로서의 한계가 여기서 드러납니다...

 

이 때 저는 컨셉을 묘사할 아이디어가 문득 떠오르게 됩니다!

 

이모티콘 비유를 통한 요청 (* 이모티콘 : 캣츠멜로디)

이번엔 이모티콘 하나를 제시해서 캐치 디자인을 다시 요청했습니다.

 

캐치 생성중 ...

이제 뭔가 점점 캐치가 제 모습을 찾아가고 있습니다!

그리고 마침내 최종 디자인이 된게

 

위 모습의 캐치입니다 ㅎㅎ

 

 

• 디자이너 ↔ 개발자 간 그림자료 교환 및 보관

디자인 시안이 완성되면 디자이너는 개발자에게 그림자료를 넘겨야 하지만 그림자료를 넘김에 있어 다양한 문제가 생길 수 있습니다.

 

1. 기본적으로 그림자료는 어떻게 넘길 것인가? (카카오톡으로 넘겨도 될까?, 6개월 후 그림자료가 필요한데 카카오 서버에서 이미지 자료가 날라가버리면...)

2. 디자이너 → 개발자에게 이미지를 넘김에 있어서 이미지 크기는 얼마나 커야 할까? (상황에 따라 요구되는 이미지 크기가 다를 수 있을텐데)

3. 이미지에 부연 설명이 필요한 경우엔 어떻게 해야하지? 대놓고 그림 안에 텍스트로 표기할 수도 없고...

 

위와같은 고민을 모두 해결해준게 제플린(Zeplin) 이었습니다.

제플린(Zeplin)은 디자이너와 개발자가 협업하기 위해 사용하는 응용 프로그램입니다.

사실 저도 제플린에 대해 말만 들어봤지, 이렇게 직접적으로 써보는것은 처음이었는데 제플린은 위에 적어둔 고민을 모두 해결해 주었습니다.

 

아래는 제가 제플린을 쓰면서 느낀 편의성에 대해 정리해봤습니다.

 

1. 제플린을 통해 이미지를 이렇게 저장을 하면서 어떤 상황에 이미지를 쓰는게 좋은지 부연설명을 달 수 있습니다.

 

 

2. 이미지를 어떻게 배치해야 하는지 가로/세로 빈 공간(padding)에 대한 px 정의도 내릴 수 있고,

해당 페이지에 보여지는 이미지 전체에 대한 다운로드를 할 수 있습니다.

 

 

3. 이미지 다운로드는 다양한 크기별로 다운로드가 이루어지며, png/jpg 중 희망하는 확장자를 선택해서 다운로드를 할 수 있습니다.

 

 

 

• 마무리

어떤 프로젝트건 간에 디자이너와 함께하면 이와같이 빛을 발할 수 있단걸 깨닫게 됩니다.

그리고 디자이너와의 협업에 있어 디자이너한테의 의뢰는 확실하면서도 신중해야 해야 하다는 것도 알게됩니다..ㅠ

 

여기까지 오느라 함께 수고한 디자이너, 프론트 개발자에게 감사하며, 앞으로의 캐치는 어떤모습으로 성장하게 될지 기대가 됩니다 :D

 

 

캐치의 성장은 앞으로도 계속됩니다!

 

 

• 캐치딜 개발 이야기 연결고리

1. 캐치딜 백엔드 개발이야기 : 좌충우돌 서버 설계 및 운영 이야기

2. 캐치딜 백엔드 개발이야기 : 문서화

3. 캐치딜 백엔드 개발이야기 : 디자이너와의 협업

4. 캐치딜 백엔드 개발이야기 : 크롤링

5. 캐치딜 백엔드 개발이야기 : Restful API 설계의 다양한 고민

6. 캐치딜 백엔드 개발이야기 : 나에게 맞는 합리적인 서버 비용을 찾아서..