Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
UI/UX웹디자인 본사노하우 관련 문의드립니다
작성자
덱스터
작성일
2022-09-19 09:22
조회
21
답변완료
현재 저는 포토샵과 일러스트를 이용해서 레이아웃을 구성뒤에 내보내기를 통해 png를 구성해서
개발을 하고 있는데, 하룹에서 웹디자인을 할때보면, 전달방식이 그냥 이미지 압축파일이 아니라
파일들 확장자 자체가 다 각기 다른데, 주로 포토샵이나 일러스트얘기보단, 피그마,스케치,제플린,XD얘기가 좀 더 많은데
혹시 본사 웹디자인팀만에 노하우나 추천할 부분등이 있다면, 도움이나 공유를 받을 수 있을까요?
전체 1

  • 2022-09-19 15:17

    안녕하세요, 웹디자인 생태계는 매우 빠르게 변화하고 있는중입니다.
    제가 입사할 초기만해도, 그때는 웹디자인은 대부분 포토샵+일러스트 조합 또는
    그외 대부분은 스케치를 사용했었습니다. 당시 저희 개발팀 역시 포토샵,일러스트,
    그리고 스케치를 주로 이용했구요. 한 2018년까지만해도 웹디쪽에 스케치가 압도적으로 엄청 많았습니다.

    그러다가 피그마가 맹추격하기 시작하고, 다양한 웹디들이 피그마로 넘어가기 시작했습니다.
    또한 어도비는 포토샵이나 일러스트가 아닌 xd사용량이 급증하기 시작했죠.

    현재는 사실상 가장 많이 쓰이는것은
    피그마,스케치,XD라고 보시면 됩니다.
    저희 본사가 피그마도 자주 쓰는 이유는, 정말 여러가지가 있는데
    실시간 협업이 매우 편리하기 때문이에요.
    특히 저희 하룹은 개발자 및 디자이너들간에 협업이 너무나도 중요하기에, 빠른 퍼포먼스를 위해 피그마 사용률이 높은편입니다.
    하지만 맥을 이용하고, 플러그인조합을 통해, 좀 더 편리하게 디자인처리를 하고 싶다면, 스케치도 아주 좋습니다.
    피그마 역시 플러그인을 이용할수있는데, 애니메이션 각도 속도 위치를 조절할수있는 모션 플러그인을 쓰면,
    개발자들한테 움직이는 방식까지도 디자인으로 표현해낼수있어 전달력에 좋습니다.
    이외 언플래쉬나 컨텐츠릴, 아이콘파이등 꽤 유용한 플러그인이 많으니 피그마로 시작하신다면 한번 해보세요.

    아 그리고 제플린은, 일단 스케치에서 플러그인으로 많이 사용하는것입니다.
    스케치와 짝꿍같은 건데, 제플린은 디자인파일확인 및 피그마처럼 코멘트나 소스다운도 가능하므로 추천합니다.
    이외 크래프트를 이용하면, 더미이미지, 텍스트, 레이어 반복과 복제, 그리고 인비젼과 바로 연결을 할수도 있어요.
    스케치랑 제플린이랑 같이 묶어서 이해하시면 좋을거같아요.

    또한 포토샵과 일러스트에 익숙하시다면, XD도 좋습니다. 어도비를 이용하시고 있다면, 추가결제없이 이용할수있어서 좋으실거에요.
    그리고 공식UI키트디자인도 다운받으실수있고, 피그마랑 비슷한 플러그인으로는, 아이콘4디자인, 프론티파이, ui페이스, 언드로우, 스타크같은걸 찾아보시면 좋고
    포토스플래쉬랑 아이콘스카우트를 꼭 설치해서 사용하시는것을 추천드립니다.