designer DK의 블로그

피그마로 진행된 디자인에 대해 css로 퍼블리싱 작업이 들어갔다. 디자인 관련 내용의 포스팅도 올렸다.https://designerdk.tistory.com/18 피그마로 디자인 작업을 할 때 보통 텍스트스타일, 컬러스타일 등 자주 사용하는 스타일을 지정해놓고 사용하는 편이다. (일명 팔레트 만들기) 그래야 작업도 편할 뿐더러 디자인 일관성도 유지되고 향후 유지보수에도 효과적이기 때문.  이는 당연히 css에도 똑같이 적용될 것이라 판단해서 피그마와 동일하게 스타일 변수화 작업에 들어갔다. 작업의 혼돈을 줄이기 위해 피그마와 네이밍도 최대한 일치시켰다. /* 컬러 스타일 */:root{ --surface-bg: #F5F5F5; --surface-primary: #186DED; --surface-white..

지난주에 와이어프레임으로 구성해본 기획안을 간단하게 html+css를 통해 화면 구획을 진행해보았다. 내 본업이 디자이너이긴 하지만 나의 개발 프로젝트들의 경우 개발 능력 향상과 기능 구현에 좀 더 큰 목적을 두고 있기 때문에 먼저 이런식으로 html+css로 러프하게 구획 설정으로 대략적인 구조를 잡고 기능 기발을 진행한 후에 그에 맞는 ui 디자인을 하는게 훨씬 더 효율적이었다. (아직 초보이다보니 디자인 열심히 다듬어놓고 기능구현이 안되면 다시 갈아엎어야 하기에…ㅜㅜ)   화면 구획은 css의 flex로 거의 진행하는 편이다. 반응형 디자인이나 간격조정에 가장 효과적이기 때문이다. (뭔가 div로 계속 감싸줘야한다는 단점은 있는듯하다;)div class="detail-basic"> div class..

개발 공부를 시작한 디자이너로써개인 프로젝트 개발물들을 만들어보며기록으로 남기고픈 부분들을 블로그에 기록해두려고 한다. 이 작은 시도들이 뜻깊은 성취로 돌아오길 기대하며.  p.s. 나의 개발 스터디는 23년 10월,html css 스터디로 시작했고 현재 자바스크립트를 공부 중에 있다.(javaScript, React, NextJS 등)현재 2.5개의 스몰 웹 프로젝트를 진행하고 퍼블리싱했다.이전 프로젝트들 그리고 앞으로 진행할 프로젝트들을이 공간에 차곡차곡 정리해나갈 계획이다.