본문 바로가기

주문 안 하신 디테일 나왔습니다/웹과 앱

더팀스 UX/UI 스터디

*개인 스터디 목적으로 작성한 글입니다

 

 

 백수   . 아직 모아둔 돈이 바닥나지는 않았지만 슬슬 심란합니다. 내가    안다고 그렇게 과감하게 관뒀을까? 다른  해서 먹고살  있을까? 괜히 퇴사했나?

 

 채용지원금을 주는 원티드에 들락날락거리다가 점점 시야를 넓힙니다. 로켓펀치도 슬쩍 들어가 보고, 링크드인도 구경하다가 '더팀스 the teams'에 오랜만에 방문했습니다.

 

 

 

더팀스는?

 

 더팀스는 인재 채용 플랫폼입니다. 다른 채용 사이트와 차별화된 특징으로는 '팀'을 중심에 두는 건데요. 어떤 팀원들로 구성되어 있는지, 회사 사무실은 어떤 모습인지를 소개하고, '팀터뷰'라고 해서 팀원들을 인터뷰한 콘텐츠나 팀원이 쓴 글을 모아두는 피드도 활성화되어 있습니다. 딱딱한 채용 페이지와는 다른 더팀스를 보면 회사에 대해 조금 더 구체적으로 알 수 있는 거죠.

 

 이용자로서 정말 좋은 서비스라고 생각해요. 사실 채용 정보만 던져두면 편할 텐데 이렇게 팀에 대해 더 자세한 정보를 제공하기 위해서 많은 노력이 필요하잖아요. 이런 일을 해주시는 분들이 계셔서 질 좋은 정보가 더 많은 사람들에게 돌아갈 수 있고요.

 

 

 

더팀스 웹사이트

 

 아무도 시키지 않았지만 더팀스 페이지를 보며 디테일한 이야기를 해보려고 합니다. 메인 홈페이지는 깔끔합니다. 아쉬운 게 딱 한 가지 있다면..

 

 홈페이지 맨 하단에 마치 구글 애드 같은 광고가 뜨는 이유... 가...? 티스토리 블로그인 줄 알았어요...

 

 못 본 채 하고 다른 페이지로 넘어가 볼까요? 회사 하나를 골라서 들어가 봅시다. 검색한 회사와 저는 아무 관련 없고 오늘 더팀스 메인 페이지에 떠서 처음 알았습니다.

 

 큰 이미지 안에 회사 소개가 들어있습니다. 심심하지 않게 이미지가 들어간 건 좋아요! 그런데 사진의 존재감이 너무 커서 내용이 눈에 잘 안 들어옵니다. 불투명도나 이미지 밝기를 조절해서 사진 안에 있는 텍스트가 눈에 더 잘 들어오면 더 좋겠어요.

 

 빨간색 네모 친 부분을 보면 회사 소개가 쓰여있습니다. 그런데 첫 줄과 나머지 줄의 줄 간격이 달라요. 첫 줄과 둘째 줄 사이의 간격은 넓은데 나머지는 좁습니다. 아무래도 첫 줄에는 회사가 하는 일을 간단하게 요약하고, 그다음 줄에서는 조금 더 풀어서 설명하는 것 같은데요. 첫 줄의 글자 크기를 키우거나 글씨를 두껍게 하거나 줄 간격을 더 극단적으로 조절하면 첫 줄과 나머지 줄들이 확 구분될 것 같아요.

 

 조금 더 밑으로 내려보겠습니다.

 

 멤버가 4명인데 (2)로 표기되네요.

 

 다음은 피드&팀터뷰 입니다. 레이아웃이 제 취향이에요. 모서리가 둥글어서 왠지 선하고 따뜻해 보여요.

 

 그런데 소제목이 피드&팀터뷰여서 뭔가 많아 보여요. 다른 소제목들은 항목 하나씩만 담고 있거든요. 그냥 '피드'로 했으면 어땠을까요? 팀에서 쓴 글이든 팀원을 인터뷰한 글이든 어차피 팀의 콘텐츠니까 피드라고 묶어도 될 것 같아요.

 

 더 내려가 봅시다.

 

 채용 정보가 나와있네요. 위의 '멤버'나 '피드&팀터뷰' 항목에서는 숫자를 소제목 옆에 표기해서 몇 명인지, 몇 건인지 알 수 있었는데 채용 정보는 숫자 표기가 안 되어있어요. 여기도 건수를 표기해주면 위와 통일성이 생길 것 같아요.

 

 여기서 눈에 띄는 부분이 하나 더 있어요. 바로 '채용 정보'라는 대제목 옆에 '채용 정보 더 보러 가기' 버튼이 있는데요. 이전 사진들을 보면 이런 버튼이 대제목 옆이 아닌, 콘텐츠 아래에 있었어요. 대제목 옆에 있으니 제자리를 찾은 것 같아 보여요. 위에 있는 버튼들도 자리를 옮겨주면 좋겠어요.

 

 다음은 SNS 피드인데요. 내용을 보니 '조금만 기다려주세요! 팀에서 연동한 SNS 정보를 업데이트하는 중입니다.'라고 나와있어요. 회사에서 운영하는 외부 SNS를 이 페이지에 연동하나 봐요.

 

 그런데 연동된 SNS 정보를 업데이트 중이라는 걸 유저가 꼭 알아야 할까요...? 바로 위에서는 콘텐츠가 가득가득 차있어서 '오 되게 알차다~' 이런 느낌이었는데 갑자기 텅 비어있으니 '오잉? 아직 정보 업데이트가 진행 중인 건가? 내가 지금 보고 있는 이 페이지는 완벽하게 업데이트된 페이지가 아닌가?' 하는 생각이 들 것 같아요. 연동되기 전이라면 SNS 피드를 아예 보이지 않게 설정해도 괜찮지 않을까요? 아니면 '준비중이에요' 정도로 정리하면 간단해 보여요.

 

 SNS피드와 스택을 지나면 회사 소개가 나오네요. 맨 위에서 간단하게 회사를 소개했다면 여기서는 왜, 어떻게, 무엇을 하는지 인터뷰 형식을 빌려 더 구체적으로 설명해줘요. 레이아웃이 참 깔끔하다는 생각이 들어요.

 

 구직자 입장에서는 회사에 대한 정보를 한 줄이라도 더 알고 싶어 하는데 이렇게 유용한 정보가 있으면 엄청난 도움이 되잖아요! 특히 회사 규모가 작으면 정보를 얻기가 너무너무 힘든데 더팀스에는 작은 회사에 대한 정보도 알차게 나와있어서 참 좋았어요. 긴 내용을 '더보기'버튼을 활용해서 접어둔 것도 좋아요.

 

 그런데 왜 이 차례에 회사 소개가 나오는지 모르겠어요. 회사를 소개하는 부분이 맨 위에 있어야 하는 거 아닐까... 하는 생각을 살짝 해보아요.

 

 또 굳이 'Why', 'How', 'What'을 넣은 이유를 모르겠어요. 소제목들을 거의 한글로 구성해두었으니 그 아래 카테고리들도 한글로 묶어주면 더 좋았을 것 같아요. Why를 빼고 그 아래 있는 '왜 일을 하나요?'를 Why 자리에 갖다 두면 어떨까요?

 

 훅훅 내려서 기타 정보를 지나 맨 아래에 도착했습니다. 여기서 빨간 화살표 부분... '하우스텝  팔로우하고 업데이트 되는 소식을 받아보세요!' ... 선생님들...

 

 을/를을 구분해서 써줄 수 있다면 좋겠지만 그러기 힘들다면 아예 없애서 '하우스텝 팔로우하고~'라고 하거나, 회사명을 없애서 통일해도 좋을 것 같아요. '팔로우하면 업데이트 소식을 받아볼 수 있어요'처럼요.

 

 

 

더팀스 어플

 

 웹사이트와 어플 사이에 차이점이 있을까 하며 어플도 다운받아봤어요. 레이아웃은 얼핏 보면 비슷해 보이지만 차이가 있더라고요.

 

 메인화면은 비슷하니 넘어가도록 하고 위에서 봤던 회사 페이지로 가볼게요.

 

 웹사이트에서 보던 화면과 확연히 달라요. 훨씬 보기 좋아졌어요. 소개, 피드, 멤버, 채용을 아예 위에 한꺼번에 몰아놨어요. 화면을 옆으로 넘기면 순서대로 넘겨가며 볼 수 있어요.

 

 웹사이트 구성과는 다르게 바로 아래에 회사 설명이 나와요. 순서는 훨씬 매끄러워졌는데 글자가 잘려 보이는 게 아쉬워요... 웹사이트의 그라데이션 효과를 여기도 적용하면 어떨까요?

 

 

 아래에는 피드, 멤버 등 위 탭에 있던 정보들이 다시 나와요. 웹사이트에서는 대제목이 한글이었는데 앱에서는 영어를 쓰네요! 더팀스 이용자들은 영어에 익숙한 편일 거라고 예상되어서 영어도 괜찮을 것 같아요. 저는 개인적으로 한글을 쓰는 걸 더 좋아하지만..ㅎㅎ

 

 SNS 카테고리의 문구도 바뀌었네요. 아휴 제가 너무 사소한 것까지 신경 쓰는 편이라 이것까지 지적하면 깐깐징어처럼 보일 것 같긴 한데 그래도 아무도 안 볼 것 같으니까 할 말 할게요..!

 

 '조금만 기다려주세요!'는 빼도 될 것 같아요. 회사나 채용에 대한 아주 중요한 내용이 아니고, 회사 SNS 연동 같은 부분을 굳이 사용자가 기다려야 할 것 같진 않아서요. SNS 연동은 사용자가 기다릴 게 아니라 관리자가 얼른 해줘야 하는 부분이라고 생각해요. '얼른 연동할게요!' 정도로 정리하면 어떨까요!

 

 

 

마치며

 

 '주문 안 한 디테일 나왔습니다'의 첫 타겟으로 더팀스의 일부 페이지를 뜯어보았는데요. 뭔가 희생양으로 만든 것 같아 죄송스럽기도 하고 한편으론 더 꼼꼼히 보게 되어 좋았어요. 만드느라 고민도 고생도 많이 하셨을 것 같아요.

 

 감사한 마음으로 더팀스 잘 이용하고 있답니다! 더팀스 팀 여러분, 만들고 서비스해주셔서 감사해요.