토이프로젝트 확장 기능 추가를 위한 UX/UI 개선 고민과 그 고민에 대한 고민

😵 문제

이번 토이 프로젝트로 진행하는 서비스는 figma 사용 없이 머릿속에서 대충 그려지는 레이아웃으로 빨리 구현해야겠다는 생각으로 따로 와이어프레임이나 레이아웃 UI 없이 마음대로 그때그때 그려 넣는 형태로 진행했다.

내가 디자이너도 아닐 뿐더러 개발에 중점을 두고 싶기도 했고, 디자인하는데 시간을 쓰고 싶지 않았기 때문에 딱 들어가야 하는 것만 들어가면 되겠지 하는 생각으로 주먹구구식  UI를 그려댔다고 보면 되겠다.

 

문제는 이후인데, 처음 핵심 기능 MVP만 개발한 상황에서 추가 기능을 넣는 방향으로 확장하려니 레이아웃을 갈아야 하는 상황이 발생했다. 초기 UXUI 디자인 설계 미스이자 역시 확장성을 고려한 기획이 중요하다는 것을 다시금 깨닫게 되는 계기가 됐다.

코드로 따지자면 SOLID 원칙의 OCP에 해당되지 않을까..........ㅠㅠ

 

코드 리팩토링하면서 컴포넌트 분리도 진행해야 했기 때문에 할 일이 좀 많을 것 같아서

사실 마음은 가능하다면..? 디자인은 생략하고 이번에도 머릿속에 구상되는 대로 진행하려 했지만 아쉽게도 내 성격상 그럴 수 없었다.

 

어차피 피그마는 나 혼자 보고 만들 부분이기도 하고, 디자인에 너무 공수를 들이면 안되기 때문에 (주객이 전도되면 안 되는데 자꾸 그러고 있는 것 같은..) 대단하게 그릴 생각은 없고 간단히 그려보고 반영하려고 하는데, 무엇보다 각각의 컴포넌트를 어떻게 배치할지가 최대의 난제이다.

😶 고민

UXUI도 고민해야 할 사안이긴 하지만 기술적인 고민보다 자꾸 보여지는 화면에 대한 고민을 하는 것 같다는 생각이 든다.

"왜 이렇게 동작하지? 더 나은 방법은 없을까?"

보여지는 레이아웃보다 기술적인 부분을 고민하고 개선하고 싶기 때문에 이번 토이 프로젝트에서는 정말 UXUI 고민은 이것이 찐찐막이라 생각하고 기술적인 부분에서 이슈가 있거나 고민이 필요한 부분이 생기면 기록을 통해 기술적인 고민을 중점적으로 풀어나가고 싶다. (희망사항이자 실천이 필요한 부분)

 

현재 진행중인 토이 프로젝트를 간단히 설명하자면, 예상 면접 질문/답변을 만들어주는 서비스인데 사용자가 폼에 기입한 내용을 기반으로 chatGPT가 프롬프트를 생성하여 백엔드 서버로부터 응답받은 내용을 뿌려주는 간단한 서비스다.

현재는 회원기능이 없기 때문에 비회원으로 이용만 가능한데 이로 인해 생성한 답변이 휘발성이라는 불편함이 있었다.

차선책으로 로컬스토리지를 사용하여 가장 최근에 생성한 질문/답변은 페이지를 이탈하더라도 다시 확인할 수 있도록 해놓았는데, 이번에 백엔드 개발자와 논의를 통해 회원기능을 추가한 후 질문/답변 요청 시 DB에 저장하고 마이페이지에서 해당 회원이 생성한 모든 질문과 답변을 확인할 수 있도록 하는 기능을 넣기로 했다.

 

현재 UI

추가로 현재는 하나의 항목에 대한 내용만 기입할 수 있고, 이 항목에 대해 최대 3개까지의 예상 질문과 답변만을 받아볼 수 있기에 여러 가지 항목에 대한 답을 받고자 할 경우 FORM을 여러번 제출해야 하는 불편함이 있다.

 

이에 한번에 최대 3개의 항목을 작성(3가지 항목에 대한 요청)할 수 있도록 FORM을 확장하고자 한다.

여기서 공통으로 가져갈 수 있는 부분은 직업과 경력일 것이므로 예상 질문 항목과 내용 작성만 여러 개 작성할 수 있도록 하는 게 좋겠다고 판단했다.

 

따라서 이 부분의 UI의 배치가 중요했기에 레이아웃을 완전히 갈아야 할 수도 있겠다는 생각이 들었는데,

그 이유는 현재 UI에 단순히 추가하는 형태로 간다면 화면 배치하는 게 쉽지 않을뿐더러 지저분할 것 같았기 때문이다.

 

지난주에 대충 그려본 와이어프레임은 다음과 같다.

아마 피그마 작업할 때는 조금 변경이 될 수도 있고, 그대로 갈 수도 있을 것 같은데 고민을 해봐야 할 것 같다.

현재는 한 화면에서 모든 인풋을 선택하여 폼을 제출하는 방식이라 작성할 개수가 늘어날 때의 문제점이 발생했다.

 

이러한 문제를 개선하고자 고안한 방법으로

1. 직업 선택 -> 2. 경력 선택 -> 3. 항목 선택 & 내용 기입 (최대 3개)

3단계로 분리하는 방안으로 수정해보고자 한다.

 

다른 사용자들이 불편하다고 한다면 나중에 다시 갈아 넣을 수도 있겠지만..

일단은 나도 하나의 사용자니까 내 의견을 반영한 거다. 😂

 

추가로 뭐가 있으면 좋을까 생각해봤다.

위와 같은 레이아웃으로 변경 시 내가 무엇을 기입했는지 한 화면에서 확인이 불가능하게 된다.

결과를 생성하기 전에 사용자가 확인할 수 있으면 어떨까?  (브래드크럼과 같은 느낌이라고 해야 할까..)

 

결과 페이지에서 확인할 수 있는 화면인데 각 항목에 대한 답변은 최대 3개이다.

이건 어쩔 수 없는 게 항목을 늘리면 그만큼 응답 시간을 기다려야 한다.

 

기본 3개 생성으로 픽스한 상태에서 답변 생성 항목을 추가하는 기능은 이번 개발 스펙으론 들어가진 않을 것 같고 이번 개발 끝나면 추가하는 방향으로 진행될 듯하다.

이 페이지도 마찬가지로 버튼 쪽 UI 통일하면서 함께 개선해 볼 예정인데 아직 어떻게 만들지는 모르겠다.

 

👀 서치

아는 게 없으니 구글형님의 도움을 받아 적절해 보이는..? 그럴싸한..? 그냥 내 마음에 드는..? 레퍼런스를 찾아보기로 했다.

2021년 트렌드였던 글래스모피즘이 너무 예뻐 보여서 반영하고 싶은 뽐뿌가 왔다.

글래스모피즘으로 가려면 흰 배경인 경우엔 적용할 수 없었을 텐데 현재는 마침 배경을 넣어놓은 상태라 잘 녹여볼 수 있을 것 같기도 해서 글래스모피즘을 참고하기로 했다.

 

글래스 모피즘의 특징으로는블러링 된 배경과 일부 요소들의 입체감? 인 것 같다.

요소 입체감은 생략하고 피그마로 비슷하게 흉내만 내보기로 했다.

개발할 때 추가해 보고 괜찮으면 적용해봐야겠다!

 

🎨 UI 디자인 수정

변경 전

현재 메인 페이지인데 뭔가 많이 허전하다. 그래서 애니메이션을 넣었던 것도 있는데 그래도 너무 허전하다.

또, 이번에 LNB 추가하면서 로그인 버튼을 추가해야 하고, '시작하기'라는 문구가 어색한 느낌도 들어서 적당한 문구가 뭐가 있을까... 생각해 보았지만 아무리 생각해도 '생성하기'와 같은 일차원적인 것 밖에 떠오르지 않았다.

 

그래서 그냥 일차원적인 거 할래.

 

1. 메인 페이지

변경 예정 (figma 시안)

figma로 메인 페이지 디자인은 다시 간단히 구성만 해보았다.

빈 여백이 너무 꼴 보기 싫어서 서비스 설명을 추가했다. ㅋㅋ

오른편 여백에 넣을 적절한 일러스트가 있으면 좋겠지만, 없는 관계로 프로젝트 초반에 만들었던 로고라도 구석에 박아놓기로 했다. 

로고는 만들어놓고 파비콘 외에 사용되는 곳이 없어서 이런 데에서라도 써야겠다 싶어서 넣은 거지만.

 

2. Form 작성 페이지

변경 전

현재는 직업, 경력, 항목 선택이 select box로 되어있고, 선택 항목에 대한 세부 내용은 text area로 작성할 수 있도록 해놓았다. 모든 내용이 기입되어야 제출 버튼이 활성화되는 형태의 UI인데, 앞서 UI 대개편을 야기했던 원흉(?)인 항목을 여러 개 추가할 경우의 UI가 애매해지는 이슈가 있어서 직업/경력/항목 선택 및 내용 작성 3단계로 나누는 방법을 선택했다.

 

개발할 때는 수정이 될 수도 있겠지만 피그마로 작업한 시안은 다음과 같다.

변경 예정 resume 1단계 (figma 시안)

변경 예정 resume 2단계 (figma 시안)

변경 예정 resume 3단계 (figma 시안)

 

 

걱정되는 사항으로는 흰 텍스트가 눈에 잘 안 들어올까 봐...

경력 사항 선택은 range로 할까 고민하다가 셀렉트 항목도 4개뿐이라 굳이 UI를 하나 더 만드는 수고를 할 필요는 없을 것 같아서 radio 버튼으로 통일하기로 했다.

 

현재 진행도(스텝)를 보여주는 건 하단에 원 모양으로 배치해 놓았는데 상단으로 옮긴 후 스텝바를 만드는 방법도 괜찮을 것 같지만 공수가 예상되어 우선은 이렇게 개발하고 나중에 변경하는 게 더 낫겠다 싶으면 바꾸는 게 좋겠다.

 

3. Result  페이지

변경 전

결과 페이지 figma 작업은 아직 진행 안 했는데 이 페이지는 버튼들을 재배치해야 돼서 시안 작업을 안하진 않을 듯한데(사실 귀찮아서 안 하려고 했지만..) 다른 페이지 먼저 레이아웃 작업 완료 하고 변경할 예정이다.

로그인/회원가입 페이지도 추가해야 하고, 변경된 UI 작업을 들어가야 하는 등 할 게 많은 관계 가장 마지막 작업할 페이지라 우선은 패스.

 

 

1차 MVP만 개발하여 배포한 서비스 ▼

캐싱되어있어서 몰랐는데 뭔가 이상해서 확인해보니 다른건 프론트에서 생성해도 직업 목록은 백엔드에서 가져오고 있는데 백엔드 서버 API를 날리신 것 같아서 급한대로 프론트단에서 API 만들어서 핫픽스 후 오전중에 말씀드려야 될 듯 하다.. ㅠ

Resumarble

 

주중에는 출퇴근으로 토이 프로젝트 진행이 어려우므로 주말에 해야 하는데 이번 주 중에는 절대 무리무리. 😥

아마 이번 추석 연휴에 몰아서 마무리해야 될 것 같다. ㅎㅎ..