본문 바로가기
별밤 일지/디자인

[좋은 UI란 무엇일까?] (1) - 브랜딩과 경험 사이

by 별밤 에디터 2023. 11. 8.

 

 

안녕하세요! 별헤는밤의 디자이너를 맡고 있는 S라고 합니다.

대학생이었던 2021년 말 팀에 합류해, 2년 차 프로덕트 디자이너가 된 지금까지

별 헤는 밤의 디자인을 혼자 맡아 조금씩 개선해가고 있어요.

 

첫 디자인 포스팅으로는,

별밤 팀이 처음 세상에 내보냈던 화면을 전격 뜯어고치게 된 이야기를 풀어보려 합니다!

(부족한 과거 작업이지만, 프로덕트 공부 초기 악으로 깡으로 만든 작업물이니 귀엽게 봐주세요🤧)

 


🚀 브랜딩 중심 UI에서 경험 중심 UI로

제가 팀에 합류한 시점은 2021년 말, 초기 별밤 팀이 데이터 활용 공모전을 준비하던 막바지였습니다.

해당 시점에는 이미 초기 디자인 컨셉이 존재했고, 제가 급하게 바통을 이어받게 된 상황이었으므로

당시 저는 기존 컨셉에 충실하여 시간 안에 작업물을 완성시키는 데에 주력을 다했었어요.

 

그렇게 세상에 나온 모습이 바로 아래의 V1 화면이에요.

별헤는밤 첫 출시 화면 (2021)
 
 

위 화면을 보면 어떤 느낌이 드시나요?

초기 별헤는밤의 디자인은 예쁜 밤하늘이 떠오르는 감성적인 앱으로 브랜딩하려 했기에

화면 이곳저곳에서 ‘그라데이션 및 glow 효과’를 많이 사용한 모습을 확인하실 수 있는데요.

(좌)여백에 그라데이션 처리 (중)shadow 대신 outer glow를 활용한 모습 (우)영역을 채우지 않고 그라데이션 처리

 

V1 출시 이후, 디자인을 수정할 여유가 나자마자

저희는 초기 디자인 컨셉을 휴지통에 버리게 됩니다.

그 이유는 무엇이었을까요?

.

.

아래 사진에서 힌트를 얻을 수 있답니다.

 

'으악, 눈부셔!'

 

 

정답은 바로,

“예뻐보이려고 한 디자인이 유저의 핵심 경험에 불편을 초래했기 때문”이에요.

다크모드에서 명도 차가 나는 그라데이션을 사용하면, 더 밝은 부분에서 빛이 새어 들어오는 듯한 느낌이 들기 마련인데요.

바로 그것이 관측지에서 앱을 사용하는 유저들의 눈에 피로감관측 불편을 야기할 수 있는 것이죠.

 

🙄 ‘에이, 다크모드면 충분하지!’

겨우 그라데이션 가지고 밝은 느낌이 든다니! 도심 속에서는 전혀 체감할 수가 없는데요.

정말 그렇게 불편할까요?

 

관측지에서는 빛이 조금만 밝아도 관측에 방해가 될 수 있어요. (좌측 하단 붉은 빛) Ⓒ 별헤는밤 워크샵 사진

 

 

별 헤는 밤은, 별을 좋아하는 사람들에게 밤하늘 관측 정보를 전달하기 위해 만들어진 서비스로

광공해가 중요한 천체 관측의 특성상 아주 깜깜한 곳에서 사용하게 될 가능성이 높은 앱이에요.

(*광공해 : 인간에 의해 발생된, 과잉 또는 필요 이상의 빛에 의한 공해. 별빛을 흐리고 천문대의 관측을 방해한다.)

 

그래서 별헤는밤은 필수적으로 어두운 다크모드의 앱이어야 했어요.

하지만 기껏 다크모드로 만들어놓고,

브랜딩 컨셉을 맞추려 예뻐 보이는 그라데이션을 남발했다가 불편한 앱이 되어버린 거죠.

 

😥 : “예쁘기만 하면 되는 게 아니었구나… 이건 망한 UI 디자인이다!”

 

-

 

한 차례의 깨달음 후, 저는 부끄러움에 사로잡혀

별밤을 브랜딩 중시 앱에서 유저 경험을 우선하는 앱으로 빠르게 전환하고 싶어졌어요.

예쁜 디자인보다 실용적인 디자인을 앞세워서요.

 

그래서 이때부터 ‘다크모드에서 더 다크모드로’라는 새로운 목표를 세우고,

별밤은 첫 디자인 업데이트를 시작하게 됩니다!

 

 

-다음 편에 계속!-

🌠 다음 이야기 : [좋은 UI란 무엇일까?] (2) - 다크모드에서 더 다크모드로

 

 

 

 

이미 다크모드인데, 어떻게 더 다크모드가 될 수 있을까 궁금하지 않으신가요?

디자인을 미리 보고 싶다면 지금 플레이스토어에서 별 헤는 밤을 다운로드하세요! 🙌

 

 

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱

오늘부터 별잘알! 오늘밤 별자리 정보, 날씨·광공해·월령까지 고려한 '관측적합도', 주변 관측지 검색으로 누구나 쉽게 밤하늘을 즐겨보세요.

play.google.com