Material Design 3를 보고 spring boot에 적용시키려고 찾아보았다.
웹컴포넌트 태그를 코딩하고 하나하나 자바스크립트로 초기화해주면 작동이 되는데 플러터에서는 디자인 설정을 활성화해주고 테마나 이런 것만 적용해 주는 것으로도 적용이 가능하나 웹에선 일일이 태그를 적고 초기화를 시켜준다는 게 좀 불편해 보였다.
그래서 부트스트랩처럼 디자인되어 있거나 만들어 주는 툴을 찾아다녔는데 피그마가 보였다.
피그마의 철학이나 유저와의 소통이 맘에 들었고 같이 일하는 팀과의 협업에 굉장히 좋아 보였다. 효율적일 거 같기도 하고 그리고 왜 인지는 모르겠으나 팀기리 디자인 하고 협업해서 소스 파일로 내려 줄 거라는 기대감이 있었다 왜 인지는 모른다.
소스로 html, css, js로 파일을 내려 줄거 같은 믿음이 있었다.
그래서 열심히 수 시간을 들여 찾아보았으나 pdf나 그림 파일로 export 하는 거밖에 보이지 않았다. ㅠㅠ
다만 같이 디자인하고 부분 부분에 css code를 보여 주는데 이걸 참조해서 개발자가나 퍼블리셔가 소스에 코딩하는데 참조하면 도움이 될 거 같다.
그래도 왠지 플러그인을 설치하면 소스 코드로 내려 주지 않을까 하여 오늘은 플러그인을 찾아보려고 한다. 부디 개발신이 도와 소스코드를 출력하게 해 주시옵소서~!
HTML, CSS 관련 FIGMA Plugins
개발자, 디자이너 협업에 아주 유용하다고 하여 소스로도 내려줄 줄 알았으나 기본적으로는 기능이 없다. 그래서 플러그인들을 찾아보았는데 현재는 특정 사이트를 피그마로 고대로 디자인해주는 플러그 인이 있고.
피그마로 디자인한 부분을 html과 css 내려주는 플러그인도 발견했다.
제가 가장 기대하는 바는 html로 Material Design3 컴포넌트를 내려주고 js로 초기화 까지를 html, js, css로 내려주면 좋겠지만 아직은 안 보이지만 왠지 누군가 플러그인을 만들어 놓지 않았을까 하는 기대감이 생긴다.
비록 그런 플러그인들이 없어도 html 플러그인을 이용하여 레이아웃과 디자인을 소스에 적용하고 머티리얼 컴포넌트들은 내 손으로 직접 코딩해도 디자이너 없이 혼자서 개발하는데 도움이 될 거 같다.
일단 유튜브를 디자인 파일로 만들어 보겠다.
피그마 플러그인 설치
상단 메뉴의 네모, 플러스 모양의 Resources 버튼을 클릭하면 서브 메뉴들이 나오는데 저 아이콘이 다양한 형태의 자원이 있다는 것인가!? 서치 해서 설치하면 간단하게 됩니다.
html을 키워드로 넣고 검색해 보면 여러 플러그인들이 나오는데 js도 내려주는 플러그인은 보이지 않네요. 아쉽습니다.
웹컴포넌트 만들어주고 js 초기화까지 해주면 금상첨화 일거 같은데 나중엔 나오지 않을까 싶네요. 지금 있는데 못 찾는 것일 수도 있고. 저는 html.to.design을 설치해서 유튜브 사이트를 디자인에 참고해 보겠습니다.
피그마 플러그인 사용법
RUN 버튼을 실행하고 주소를 입력하면 먼가 작동이 되고 디자인 파일로 넘어옵니다.
간단하게 Run 버튼만 클릭하면 된다. 기본으로 설치 되어 있는 플러그인인지 딱히 설치를 하고 그러진 않는다.
약간의 이슈가 있다고 알려주지만 결과물은 흡족합니다.
살짝 다른 모습도 있지만 만족스럽습니다. 외국 서버에서 결과물을 가져온 건지 언어가 영어고 콘텐츠도 처음 보는 것들이네요. 한국에서 사용할 디자인을 만든다면 한국 사이트를 디자인에 참조하는 것도 괜찮겠네요.
사이트에 있는 링크들도 타고 들어가서 세부적인 레이아웃도 만들면 좋겠지만 검색봇도 아니고 세부적인 내용들은 링크를 잘 입력해서 디자인 초안을 받으면 될 거 같고 주소로 디자인 초안을 잡는 거면 spa로 만들어진 사이트는 세부적인 화면들은 못 가져올 거 같기도 하네요.
HtmlGenerator plugin
이제는 디자인을 소스 코드로 만드는 방법을 해보겠습니다.
html로 만들 객체를 선택하지 않으면 이런 메시지가 나옵니다.
객체를 선택하고 HtmlGenerator를 실행시키면 실행이 되지만 시간이 좀 걸리네요
생각보다 오래 걸리네요. 밥을 먹고 돌아왔으나 계속 돌아가고 있네요... html to design으로 만든 디자인은 통째로 htmlGenerator로 돌려보니 계속 러닝 중이라고 나오고 그전에 받은 메테리얼 디자인 3 초안으로 한 덩어리만 선택해서 하니 아래와 같은 코드가 생성되어 나오네요. 흠 근데 클래스명 이런 것들이 코드처럼 나와서 손을 좀 보면서 써야 할거 같네요.
여기까지 왔으면 뭔가 Material 관련 플러그인도 있을 거라 생각이 들어 검색을 해 봅니다.
머티리얼 관련 플러그인들도 많은데 아이콘 심벌 이런 건 알겠는데 빌더가 머 하는 건지 궁금하네요.
머티리얼 빌드를 클릭해 보니
테마를 고를 수 있는데 M3가 보이는 걸 보니 MD3로 디자인 되고 그에 맞게 html 코드로 내려 줄지 기대가 됩니다.
다음 시간엔 메테리얼 빌드 플러그인을 사용해 보고 웹 개발에 유용하게 쓸 수 있을지 테스트해 보겠습니다.
'개발 > 스프링 FIreBase Neo4j' 카테고리의 다른 글
| 스프링 구글 로그인 시큐리티 설정 계정 정보 확인 (0) | 2023.02.07 |
|---|---|
| 미디어 쿼리 적용 반응형 웹 사이트 만들기 와이드 모니터용 (0) | 2023.02.05 |
| 스프링 부트 메테리얼 디자인 적용 라이브러리는 없나? 피그마? (0) | 2023.02.04 |
| 스프링 부트 머티리얼디자인 적용 시키기 (0) | 2023.02.02 |
| Spring Boot Material Design 3 선택 이유 Thymeleaf Layout 적용 (0) | 2023.02.02 |
