스마트폰부터 키오스크까지, 디바이스에 맞춘 화면 디자인
스물세 번째 人(in)spiration | UX팀
Plus 人(in)spiration – 플러스엑스의 '일' 그리고 '사람'이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스에는 다양한 사람이 모여 함께 일합니다.
변화하는 시대에 다양한 경험을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스.
그 사람들의 이야기를 만나보세요.
변화하는 오피스 환경에 발맞춰 등장한 앱, 스피어
UX/UI팀 UI Designer 유다준
3년 넘게, 오래 지속된 코로나는 근무 환경을 바꿔 놓았습니다. 이게 되겠어? 라고 생각했던 원격근무와 비대면 협업이 자연스러워졌죠. 그러면서 기업도 마인드를 바꿔 장소에 구애받지 않고 어디서든 일할 수 있는 WFA(Work From Anywhere)를 실행하기 시작했습니다. SKT도 그중 하나로, 거점 오피스인 'Sphere(스피어)'를 각 지역에 마련하고 있습니다.
플러스엑스 UX팀은 SKT 거점 오피스에서 사용할 수 있는 앱 'Sphere(스피어)'를 디자인했습니다. 스피어는 사용자의 스케줄을 관리하여 업무 효율성을 높여 주고, 떨어진 동료와 소통할 수 있게 함으로써 유대감을 잃지 않도록 돕습니다. 여기에 하나 더. UX/UI팀은 거점 오피스에서 사용하는 좌석 예약용 키오스크와 회의실 일정 공유용 월패드도 디자인했습니다.
스피어를 단순히 사내 업무용 앱이라고 생각하겠지만, 자세히 들여다보면 스피어는 시대 변화를 한발 빠르게 반영한 앱입니다. 프로젝트를 시작했던 3년 전과 비교하면, 거점 오피스를 마련하는 기업의 수가 늘어나고 있고 키오스크와 월패드는 일상에서 흔하게 마주하고 있으니까요. 그래서 스피어 앱 프로젝트에 참여했던 유다준 디자이너는 작업 기간을 생각하면 힘듦과 함께 설렘도 떠오른다고 합니다.
이번에는 UX/UI팀을 대표하여 유다준 디자이너가 작업 스토리를 들려줄 겁니다.Q. 스피어는 어떤 앱인가요?
유다준 SKT의 거점 오피스인 스피어(Sphere) 이용을 도와주는 앱이에요. 거점 오피스로의 출/퇴근을 기록하고, 좌석과 회의실 예약을 도와주죠. 변화하는 오피스 환경에 맞춰 등장한 앱이라고 할 수 있어요.
Q. 왜 거점 오피스만을 위한 특정 앱이 필요하나요?
유다준 앱은 거점 오피스의 출/퇴입만 관리하는 것이 아니라, 멀리 떨어진 동료들과 소통하는 매개체이기도 해요. 기존 업무환경을 살펴보니 SKT는 구성원끼리 친밀하고 소통을 많이 하는 회사였어요. 사내 문화 구축도 잘 되어 있었고요. 그래서 비대면으로 각자의 거점에서 근무할 경우, 구성원 개인이 소외감을 느낄 수도 있겠다는 생각이 들었어요.
Q. 스피어 앱은 오피스 이용 관리 외에도 소통이라는 목적이 있었네요.
유다준 초기 기획 시, '물리적 요소(거리)로 인해 생기는 감정적 문제(소외감)를 해결한다'는 걸 목표로 잡았어요. 동시에 업무 관리도 지원하고요. 그래서 어느 거점 오피스를 사용하든 사용자를 따뜻하게 맞이하고, 매일 내 업무를 관리해 주는 앱이 되었으면 했어요.
Q. 많은 직장인이 소외감에 물음표를 띄울 거예요. 그런데 경험자의 이야기를 들어보면 동료 없이 일하는 게 의외로 외롭다고 하더라고요.
유다준 딱딱하게 일만 하는 분위기가 아니라는 SKT의 내부 분위기가 기획에 영향을 미쳤어요. 또한, 내부 컨셉 이미지로 본 거점 오피스들은 지역마다 분위기는 달랐지만, 모두 좌석과 업무 공간이 다양하게 구성되어 따뜻한 분위기가 느껴졌어요. 그래서 거점 오피스에서의 생활을 업무에만 국한하지 말고 그곳만의 오피스 문화가 더해지면 좋겠다고 생각했죠.
거점 오피스의 지점별로 커뮤니티를 운영하면 또 다른, 새로운 오피스 문화가 형성될 수 있습니다.Q. 스피어 앱으로 어떻게 다른 지역에 있는 동료와 소통할 수 있나요?
유다준 나와 같은 거점 오피스를 이용하는 팀원은 누구인지, 다른 팀원은 어느 거점 오피스에서 근무하는지를 볼 수 있게 했어요. 팀원들의 휴가 일정도 공유되고요. 이외에도 지점별로 커뮤니티를 운영하여 소통의 계기를 만들어주고자 했어요. 하지만 커뮤니티 서비스는 초기부터 활발하게 운영되어야 한다는 특징 때문에 아쉽게도 스펙 아웃되었어요.
Q. 좋은 기능인데 아쉽네요.
유다준 커뮤니티는 처음부터 활발하게 운영되어야 이후에도 꾸준히 잘 운영되거든요. 한편으론 예상치 못한 문제도 생길 수 있고요.
Q. 스피어의 또 다른 목표는 무엇이었나요?
유다준 사용성이요. 좌석과 회의실을 예약하고, 팀원끼리 SKT 통화를 하는 등 앱 기능이 꽤 많아요. 출근부터 퇴근까지, 하루 종일 사용하는 앱이기 때문에 편안한 사용성에 초점을 맞췄어요.
Q. 하루의 시작과 끝을 함께한다는 점이 스피어 앱의 특징이라고 생각해요.
유다준 WFA에 필요한 기능과 콘텐츠를 스피어 앱만으로 활용할 수 있어야 했기에 메인 홈 화면 구성에 신경을 많이 썼어요. 첫 화면 상단에 나와 관련된 주요 정보(출입한 오피스, 팀원 관련 정보)를 보여주고, 하단에는 개인 일정과 알람 등을 배치했죠. 앱이 개인 비서처럼 때에 맞춰 내 일을 챙겨준다는 느낌을 받을 수 있게요.
Q. 홈 메인 화면에서 사용자에게 필요한 정보만 제공한 이유는 무엇인가요?
유다준 대기업은 구성원의 폭이 넓기 때문에 디지털에 익숙하지 않은 사람까지 고려해야 해요. 그래서 SKT에서 원하는 메뉴를 바로 찾을 수 있도록 직관적이고 사용이 쉬운 구조와 화면을 요청했어요.
Q. 사용성을 최우선으로 디자인하면서 어려웠던 점은 없었나요?
유다준 안정적인 레이아웃을 추구하는 동시에 따뜻함까지 느껴지는 화면을 디자인해야 한다는 점이 어려웠어요. 디자이너 입장으로 보면, 실험적인 디자인을 못 한다는 점이 아쉬웠죠. 초기 기획은 거점 오피스의 각 지점을 색으로 구분해서 인지도는 물론 감성까지 충족시키려고 했거든요. 그런데 각 지점을 다 구분하면 사용자가 복잡할 수 있다는 피드백을 받고 변경했어요. 인터랙션도 새로운 걸 제안했지만, 사용성을 위해 자주 사용되는 인터랙션이 적용되었고요. 서체 역시 국/영문은 물론 숫자까지 가독성이 높은 스포카 한스 네오를 사용하는 등 안정적이고 보기 쉬운 화면을 최우선으로 작업했어요.
Q. 그럼에도 따뜻함을 전하기 위해 노력한 부분이 있었다면요?
유다준 홈 상단에 "출근하셨어요?"(오피스 출입)나 "오늘도 수고하셨어요"(오피스 퇴실)와 같이 친근하게 다가갈 수 있는 문구를 일부러 더 넣었어요. 또, 자주 사용하는 오피스를 특정 색으로 지정해서 경직된 화면 분위기를 해소하려고 했고요. 유연한 부분에서는 최대한 활기찬 분위기가 나도록 디자인했습니다.
Q. 안정적이고 쉬운 디자인을 하면서도 스피어 앱만의 개성을 주고 싶었을 텐데요.
유다준 그래서 타임테이블, 버튼 등에 곡선 값을 기존보다 더 줬어요. 그리고 아이콘의 형태를 직관적으로 하되, 더 귀엽게 그렸고요. 주어진 조건에서 최대한 부드럽고 친근한 느낌을 줄 수 있도록 노력했어요.
Q. 그러고 보면 스피어는 꽤 많은 정보를 전달해야 하는 앱이에요.
유다준 맞아요. 앱이 전달하는 정보들이 꽤 복잡해요. 그래서 정보들을 한눈에 알아볼 수 있게 디자인했어요. 숫자는 단위를 간단하게 표기해서 보자마자 인식할 수 있게 하는 등, 다양한 관점에서 살펴보고 계속 수정하며 알아보기 쉽게 정리했어요.
Q. 이 프로젝트의 재미있는 점 중 하나는 스마트폰 말고도 여러 디바이스 화면 디자인을 했다는 점이에요.
유다준 스피어 앱뿐만 아니라, 거점 오피스의 좌석을 예약할 때 사용하는 키오스크와 회의실을 예약할 때 사용하는 월패드 화면까지 디자인했어요.
Q. 디바이스 크기가 다 다르네요. 그 차이로 인한 어려움은 없었나요?
유다준 작업할 당시, 스피어가 지어지고 있었기 때문에 실제로 사용하는 디바이스로 테스트할 수 없었어요. 키오스크와 월패드는 사용 환경과 동일한 디바이스가 구비되어 있지 않아서 회사 TV 모니터를 보면서 작업했는데요. 나중에 현장 테스트를 하니까 크기, 비율, 해상도가 달라서 작업을 다시 한 적도 있어요.
Q. 키오스크 화면 디자인 과정이 제일 궁금했어요. 키오스크가 일상에 가깝게 들어온 만큼, 이젠 키오스크 UI 디자인도 중요해졌으니까요.
유다준 크기를 가늠하는 게 제일 어려웠어요. 사용자는 키오스크에 뜬 좌석 배치도를 보고 좌석을 예약하는데요. 사용자가 편하게 좌석을 선택할 수 있는 버튼 크기를 가늠하기에 어려웠어요. 게다가 사용자가 키오스크 화면 어디까지 편하게 손이 닿는지도 알아야 하는 데 실제로 사용하는 디바이스가 구비되어 있지 않으니까, 상상력을 최대한 동원해서 여러 경우의 수를 고려해야 했죠. 그럼에도 현장에선 다른 부분이 나오더라고요.
Q. 뭐가 제일 많이 달랐나요?
유다준 지점마다 공간 크기, 좌석 형태와 수가 다르니까 키오스크 화면 크기가 같더라도 좌석 배치도의 비율이 다르게 느껴지더라고요. 원형 좌석에 비해 사각형 좌석은 크게 보이는 등 생각하지 못한 부분에서 차이가 보였죠. 그래서 저희가 직접 각 지점의 좌석 배치도를 그려서 각 좌석의 비율을 맞춰 나갔어요. 또, 좌석을 선택하면 예약자 이름이 좌석 옆에 뜨는데 그때 잘 보이는 텍스트 크기와 위치도 미세하게 조정하면서 맞췄어요.
좌석을 선택하고 예약할 수 있는 좌석배치도. 비율을 위해 디자이너들이 그려야 했습니다.Q. 키오스크 UI를 디자인할 때, 또 무엇을 고려해야 할까요?
유다준 팝업 크기요. 너무 크지도, 작지도 않은 적당한 크기를 찾아야 해요. 사용자가 편하게 누를 수 있도록 적절한 버튼 위치도 찾아야 하고요. 한편, 스피어에서는 키오스크의 얼굴 인식으로 출근 체크를 할 수 있기 때문에 키오스크 내 카메라 위치도 고려해서 디자인해야 했어요.
Q. 어려운 과정을 넘어서 드디어 스피어 앱이 론칭되었죠. 론칭 후, 아쉬웠던 점이 있다면요?
유다준 아무래도 사내용 앱이니까 후기를 들어볼 기회가 적다는 점이 아쉬워요. 누구나 사용할 수 있는 앱을 디자인하면 사용 후기를 쉽게 들을 수 있잖아요. 아니면 저희가 직접 사용해 보면서 리뷰가 가능한데 스피어 앱은 그럴 수 없다는 점이 아쉬웠어요.
Q. 사내용 앱을 디자인할 때, 무엇을 제일 먼저 고려해야 할까요?
유다준 커머스 앱은 체류시간을 길게 하는걸, 금융 앱은 체류 시간을 낮추는 걸 목표로 잡아요. 이처럼 앱마다 세부 목표가 다르더라도, 일반적으로 기업(브랜드) 이익을 위한다는 공통된 목표가 있죠. 하지만 스피어는 달라요. 하루 종일 사용자 옆에서 업무 활동을 돕는 동시에 달라진 업무 환경에 적합한 앱이어야 했죠. 그런 점에서 다른 사내용 앱과도 구분돼요. 그래서 스피어 앱을 작업할 때는 '어떤 환경에서 사용하는 서비스인가'를 제일 우선으로 고민했어요.
Q. 갑자기 변한 업무 환경에 맞춰 등장한 앱이고, 비슷한 예시도 없어서 방향성을 잡기가 어려웠을 거예요.
유다준 맞아요. 당시 코로나로 인해 근무 형태가 격변하고 있었거든요. 어떻게 변할지 예측이 안 되니까 오피스 트렌드 관련 기사도 많이 찾아서 읽었어요. 그런데 대부분 열린 결말로 끝나서 확신이 안 서더라고요. 그래서 SKT의 기존 업무 환경과 그를 바탕으로 변화한 미래 모습을 엄청나게 생각했어요. 스피어 앱이 사용될 환경도 상상해 보고요. 지금 생각하면 엄청난 도전이었어요. 그래서 어렵고 한계를 느꼈지만, 한편으론 '언제 이런 걸 디자인해 보겠어!'라는 생각에 재미있었어요.
Plus 人(in)nspiration 릴레이 인터뷰는
앞으로도 계속 플러스엑스 브런치를 통해 발행됩니다.
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
