배경화면 색상 선택 기능

[userJu]

개요

노션 피드백 이후 테스크에 배경화면 색상 선택 기능이 있는 것을 보고, 작업을 시작하기 전에 논의해볼 내용이 있어 만들었습니다.

배경 색 선택 시점

1. stack을 선택할 때 같이 선택하기

• 이점 : firebase에 선택된 색상을 기반으로 한 하나의 이미지만 등록할 수 있습니다
• 단점 : 사용자가 여러 개의 배경색을 이용하기 위해서는 동일한 작업을 몇 번 반복해야 합니다

1. 이미지를 다운받아 올 때 같이 선택하기

• 이점 : 사용자가 여러 개의 배경색을 이용하기 위해서 동일한 작업을 반복할 필요가 없이 result 페이지에서 여러 번 다운받으면 됩니다.
• 단점 : firebase에 배경 색이 다른 여러 개의 이미지를 등록해야 합니다 / result 창에서 발생하는 선택 범주가 늘어납니다. 선택지가 늘어날수록 사용자는 혼동과 불편함을 겪는다고 알고 있습니다.

배경 색 종류

1. 검정 : 모든 모드에 적용해도 좋은 색상
2. 하양 : 모든 모드에 적용해도 좋은 색상
3. 투명 : 배경 색상과 위화감 없이 어우러짐
   을 가장 많이 이용할 것 같습니다.

예시로 가져온 투명 배경입니다

[msdio]

사용자가 여러 개의 배경색을 이용하기 위해서는 동일한 작업을 몇 번 반복해야 합니다

무슨 말인가 했는데.. 그렇네요. 만약에 내가 흰 배경으로도, 검은 배경으로도 사용하고 싶다면 같은 작업을 두 번 반복해야 하는건 맞는 것 같아요.

그렇다고 색상 별로 firebase에 모두 올리는 선택지는 너무나 비효율적인 것 같아요. 이미 결과창에서 copy 옵션으로 3가지 선택지가 존재하는데, 거기에 추가로 색상까지 고르게 하는 것은 사용자 입장에서 귀찮을 것 같긴 해요.

제가 지금 생각나는 방법은 아래 두 가지 입니다!

1. 결과 창에서 뒤로가기를 눌렀을 때 메인 화면 input 창에 직전에 입력했던 스택 값들이 남아있는다면, 좀 더 색상 바꾸기가 수월하지 않을까요?
2. 최종 이미지를 생성하기 전에, 사용자에게 이렇게 생성될거야 라는 미리보기를 보여주고 확인을 눌렀을 때 파이어베이스에 업로드 하면 검은색 만들었다가 어 별론데? 하얀색으로 해봐야지~ 하는 시행착오가 좀 더 줄어들지 않을까 싶어요.

+ 결과창 이미지는 보니까 글자 색상도 고려해야겠네요..!

[userJu]

1. 결과 창에서 뒤로가기를 눌렀을 때 메인 화면 input 창에 직전에 입력했던 스택 값들이 남아있는다면, 좀 더 색상 바꾸기가 수월하지 않을까요?
   -> 양날의 검이 될 수도 있다는 생각이 들어요..! result 페이지에서 이미지 복사를 끝낸 후 home으로 돌아왔는데 방금 만들었던 기술 스택이 남아있는건(아무리 쉽게 지우고 다시 생성할 수 있더라도) 의도된 작동이 아니라 개발자의 실수로 비춰질 수도 있을 것 같아요..! 좋은 아이디어이지만 사용자에게 조금 더 스무스한 넛지를 만들어 줄 방법을 생각해볼게요!

2. 최종 이미지를 생성하기 전에, 사용자에게 이렇게 생성될거야 라는 미리보기를 보여주고 확인을 눌렀을 때 파이어베이스에 업로드 하면 검은색 만들었다가 어 별론데? 하얀색으로 해봐야지~ 하는 시행착오가 좀 더 줄어들지 않을까 싶어요.
   -> 이 아이디어 좋은 것 같아요! Loading 페이지로 접근하기 전에 검정 / 하양 / 투명 등 몇 개의 미리보기를 보여주고 사용자가 선택한 선택지로 Loading 페이지에 접근한다면 result 페이지에서 비슷한 선택을 두 번 해야 하는 것보다 심리적 부담감도 적을 것 같아요!😆

맞아요 글자 색상..!
검정 배경일 때는 하양
하양 배경일 때는 검정

투명 배경일 때는.. 뭐가 좋을까요?

• 스택 명 p 태그의 백그라운드를 하양으로 잡고 검정 글씨
• 스택 명 p 태그의 백그라운드를 검정으로 잡고 하양 글씨
• 파랑..? 회색,,..?