Haroop Webagency team BICTOR

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

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

제목
웹디자인 노하우 관련 질문
작성자
바몬드
작성일
2022-05-31 11:08
조회
261
답변완료
안녕하세요 하룹에서는 주로 어도비 xd로 시안을 받아서, 그것을 토대로 또 별도 코딩이나 구축을 하는데
저는 주로 포토샵을 웹형식으로 내보내서 그거 맞춰 코딩을 했었습니다.
근데 다른분들보면 어떻게 하루만에 이걸 다 코딩했지? 할 정도로 피시 태블릿 모바일 코딩이 매우 빠를때가 있는데
혹시 웹디자인 코딩시 어떤 팁이 있을까요? 아니면 그냥 경험에 차이일까요?ㅠ
리액트로 개발시, 포토샵처럼 웹형식으로 내보내기등에 그런 기능을 사용할 방법이 있을까요?
구성 레이아웃만이라도 대략적으로 분류되어 내보낼 수 있다면, 좀 더 코딩속도를 높힐 수 있을거같아서요ㅠ
전체 1

  • 2022-05-31 13:16

    안녕하세요 저희 하룹에 모든 페이지코딩은
    기획->디자인->웹디자인->코딩 순서로 이뤄지게 됩니다.

    웹형식으로 내보내기등을 이용하신다 해서 코딩속도가 엄청나게 빨라지는것은 아닐거같지만
    전체적으로 구성을 잡아갈때등에는 그래도 기본일 수 있을거같습니다.

    하지만 꼭 XD만 사용하는것은 아니구요.
    포토샵, 일러스트도 상당히 많이 사용합니다.
    이것은 디자이너님들에 따라 사용툴이 다르다고 생각하심 될거같습니다.
    XD이외에 피그마도 꽤 많이 이용하고 있습니다.
    최근에 웹디자인, 프론트엔드 개발팀에서 XD를 사용하는 직원들이 늘어나서
    상대적으로 디자인 시안이 XD로 많이 전달되는것일뿐
    대부분 다 사용하고 있답니다.

    문의하신 XD에 리액트 경우는, vs코드를 이용하시면 더 편리하실 수 있습니다.
    vs코드에 터미널에서
    새 터미널 생성후
    npx create-react-app
    입력후 리액트 앱을 생성해주세요.

    그 후
    npm i -D react-router-dom
    npm i -D @types/react-router-dom
    를 순서대로 입력해주세요

    이렇게하시면 리액트 사용준비가 끝납니다.

    그다음 XD파일을 리액트에서 사용하는 jsx와 css파일로 변환을 하면 됩니다.
    XD에서 Fireblade 플러그인을 설치해주신후 컨트롤+쉬프트+F 를 누르시면
    Fireblade가 왼쪽에서 뜨실거에요.

    그 다음 Fireblade회원가입후 Folder to export content에서 scr폴더를 지정해주세요.
    그리고 css와 react에 체크해주세요.

    그후 아트보드 바로위의 이름을 누르신 상태에서 Export를 누르시면 됩니다.
    이렇게 모든 아트보드를 변환해주시고, scr폴더로 가보시면, 아트보드들이 전부 다 분류가 되어있으실거에요.

    확인해보시고 안되시는게 있으시면 답변남겨주세요 🙂