본문 바로가기
FE 프로젝트 일대기

[FE] UT 피드백1-흐릿한 아이콘 문제 FIGMA 피그마 아이콘 svg export 로해결!

by 쩰라 2023. 3. 10.

저희 팀은 월요일부터 유저테스트를 시작했습니다.

팀장님께서 우리팀이 가장 먼저 배포해서 많은 피드백을 받고 고쳤으면한다고하셔서 기한을 맞추기 위해 다들 최선을 다해서

다같이 노력한 결과 결국 가장 먼저 배포를 해냈어요!

 

저희 가족사진이에요

생각보다 많은 분들께서 피드백을 주셨고, 현재 총 74개의 구글폼 응답을 받았습니다! 

미리 내부테스트를 많이 해보았고 내부 QA를 받아 지난 주에 빡세게 고쳐보았지만

예상했던 것과 같이 CSS 피드백이 많았어요 🥺

 

 

이건 디자이너님께서 따로 작성해주신 디자인 수정할 사항들.. 이중에 몇가지는 담주 월요일까지 해볼 예정이에요.

 

전 개인적으로 너무나 심각하다고 생각했던,, 네비게이션바 아이콘문제는 가장 먼저 해결하고싶었어요....!!! 

흐릿흐릿..

저..저저 픽셀 깨지는거 좀 보소 

분명 PNG로 파일 받아서 확인해보면 화질이 안깨지는데 페이지에 넣었을 때 깨져서 어떻게 해결할 수 있을지 감이 안왔어요. 

그러던 중 디자이너님께서 한마디 던지셨는데..

"그거 SVG로 하면 안깨진다는 얘길 들은 적이 있어요!"

그래서 바로 한번 해보죠 하고 바꿔보았더니...

SSAP선명해짐

 

디자이너님 대애애애애앰

 

 

FIGMA export하기

아이콘 선택 후에 SVG파일로 다운받아요!!!

 

그리고 기존 png 파일에서 svg로 모두 변경해주었습니다.

import searchIcon from "../../img/searchIcon.svg";

사이즈가 너무 작다고 피드백주셨던 마이페이지 버튼도 아이콘크기를 키웠습니다!

열심히 수평도 맞춰보았구요

 

너무 오랫동안 안고있던 문제였는데, 간단히 해결되어서 속이 시원하군요! 

 

아직 코드 리팩토링과 더불어 고쳐야할게 산더미에요!! 😳😳

점차 나아지는 모습 보여드리겠습니다 😊😊😊

읽어주셔서 감사합니다!

 

저희 그님스 서비스를 이용해보시려면...

👇

https://gnims.kr/