색상 배경 컬러피커 적용 시 사용성 향상을 위한 제안

[se-chive]

주제

Announcements

Body

심플썸네일 사용성 향상을 위한 제안 사항입니다.

AS-IS

• 컬러피커를 클릭하고 원하는 색상을 선택한 다음 다시 컬러피커( x 아이콘 )를 클릭해야 색상이 적용된다.
• 색상 고르는 컴포넌트 영역 밖을 클릭해도 사라지지 않으며, 위아래 스크롤이 고정되어 있지 않다.

컬러피커를 통해 색을 적용하는 과정에서 아이콘의 가시성이 낮아 인지하기 어렵고, 기존 유사서비스를 사용해본 경험이 있는 경우 영역 밖을 클릭하면 사라지는 경우가 많기 때문에 이 과정에서 불편함을 느낄 수 있음. 또한 컬러피커 컴포넌트를 사용할 수 있는 동시에 그 외의 모든 컴포넌트들이 클릭 가능하기 때문에 미스터치가 우려됨.

TO-BE

1. 컬러피커(x 아이콘)의 가시성을 높인다.
2. 스크롤을 할 수 없도록 고정한다.
3. 컬러피커 컴포넌트 영역밖을 클릭하면 사라지도록 한다.

BDD-Task!

저... BDD 안써봐서 잘 모르겠어요 맞는지 알려주세요ㅠㅜ

• 컬러피커가 열린 상태에서 > 컬러피커 컴포넌트 영역 밖을 선택할 경우 -> 컬러피커가 사라지며 마지막으로 선택된 색상이 미리보기에 적용된다.
• 컬러피커가 열린 상태에서 > 드래그를 하면 > 컬러피커 내에서는 드래그가 되고, 화면은 스크롤 되지 않는다.
• 컬러피커 아이콘을 클릭한 경우 -> 아이콘이 ~~ 된다. ( 이 부분은 논의를 해야겠네요 )

[da-in]

• '컬러피커'와 '드롭다운'이 열린 상태에서, 외부 클릭 시 자동으로 닫히도록 구현 #110

오😮 컬러피커 외부 영역을 클릭하면 사라지도록 하는 내용이 곂치네요!
다만 저 글에는 드롭다운이 포함되어 있고, 여기에는 스크롤 제한이 있어요!

일단 다른 영역이 있어서 #110 을 닫지는 않겠습니다!
담당하는 개발자분이 중복되는 내용을 고려해서 개발진행하면 될 것 같습니다!