designer DK의 블로그

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

Motive서울시의 유치원 정보를 쉽고 편하게 열람할 수 있는 웹사이트 만들기 프로젝트. 원래 개발 스터디 목적으로 시작한 프로젝트였지만 기획을 해가면서 실제 유입되는 사용자들에게 유의미하고 사용성 좋은 사이트로 만들고 싶은 욕심이 생겼다. 그런데 서치를 해보니 이미 교육부에서 운영하는 ‘유치원 알리미’라는 사이트가 있었고 데이터베이스도 훨씬 방대했다.  유치원알리미는 전국 단위로 유치원 검색이 가능하고 어린이집과 유치원 모두 다뤘다. 그래서 데이터면에서 넘사벽이긴 했지만 그만큼 데이터를 조회하는데 다소 느리다는 단점도 발견했다. 그리고 이런저런 다른 정보들도 많이 다루다보니 ‘사용자가 어떤 특정 유치원 정보를 열람하겠다’라고 했을 때 약간은 사용성이 복잡한 면이 있었다.  Project goal따라서 ..

이번 서울시 유치원 정보 사이트 프로젝트 대망의 마지막 기능 구현은 페이지네이션이었다. 페이지네이션은 목록의 양이 많아졌을 때 페이지로 정리해서 나눠담는 기능인데 이 기능의 경우 개발 초보인 나에겐 너무 어려운 기능이어서 이번 구현은 사실상 거의 gpt에게 맡겼었다. 하지만 이번 프로젝트는 단순히 기능 구현 보다는 개발 공부에 더 큰 의미가 있기 때문에 비록 gpt를 이용해서 만든 코드이지만 내가 이해할 수 있는 선까지는 최대한 분석해보기로 했다. list.js 페이지에서 몇가지 전역변수를 지정하고 시작했다.let currentPage = 1; // 현재 페이지 번호const itemsPerPage = 10; // 페이지당 표시할 항목 수let currentList = []; // 현재 목록을 저장할 배..

서울시 유치원 정보 사이트 프로젝트 개발의 디테일 페이지에서  학급수와 유아수 데이터를 그래프화하는 작업을 진행하였다. 구글로 서치해본 결과 chart.js라는 것을 쓰면 효과적으로 구현할 수 있을 것 같아서 그걸 이용해서 제작해 보았다. 홈페이지 가보면 매우 다양한 그래프 타입을 사용 가능한 것, 그리고 생각보다 굉장히 디테일한 설정까지 가능한 것을 확인할 수 있었다.  일단 html 쪽에 스크립트 태그안에 소스를 cdn 방식으로 불러와서 chart.js 사용할 준비.script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js">script> 그리고 그래프를 넣어줄 html쪽에  캔버스라는 태그를 만들어주었다. 여기..

이번 서울시 유치원 정보 사이트 프로젝트를 설계할 때 서울시 구 이름 버튼으로 유치원을 찾을 수 있으면서도 홈 화면에서 직접 검색 기능을 넣으면 ux가 더 좋을 것 같다고 판단되었다.   검색 인풋에 유치원 명을 넣으면 리스트 페이지에서 검색된 유치원 목록 나오게 구현되도록 계획하였다.   인풋에 밸류를 입력하고 검색버튼을 누르면 searchedKeyword 변수에 검색어를 localStorage로 저장 후 리스트 페이지로 이동된다.// 검색창 인풋값으로 검색해주는 버튼document.querySelector(".search-btn") .addEventListener("click", function () { // 인풋 값 가져오기 searchedKeyword = searchInput.value.trim(..

이번엔 디테일 페이지에 대한 작업이었다. 이전에 버튼 텍스트 콘텐츠로 서울시 구 이름을 전역변수로 저장, 리스트 페이지에서 그 저장된 값을 가져왔었는데 같은 방식으로 리스트페이지에서 클릭한 목록의 유치원 명을 clickedKinderName이라는 전역변수에 저장하고 그 값을 디테일 페이지에서 localStorage를 이용해서 로드하였다.document.addEventListener("DOMContentLoaded", function() { let clickedKinderName = localStorage.getItem('clickedKinderName');  if (clickedKinderName) { searchDetail(clickedKinderName); } else { console.error("..

이번 프로젝트를 개발함에 있어서 가장 첫번째로 구현하려는 기능은 홈 화면에서 각 서울시 구에 해당하는 버튼을 눌렀을 때 list.html이라는 해당 구 유치원 목록 화면으로 이동해서 눌렀던 버튼의 텍스트콘텐츠로 api를 조회해서 목록카드를 채워서 나열해주는 것이었다.   이 부분을 해결함에 있어서 두가지 부분에서 부딪혔었는데 첫번째는 서울 열린 데이터 광장에서 데이터를 가져오는 부분이었다.  데이터를 XML방식으로 제공해줘서 난감했다 ;;XML방식으로 작업해보려고 시도도 해보았고 json으로의 변환 방식도 찾아보긴 했었지만 둘 다 너무 복잡해서 프로젝트를 함에 있어서 배보다 배꼽이 더 커지겠다고 판단되었다. 그래서 XML로 가져오는 것은 과감히 접고 다행히 json을 개별 파일로는 제공해주길래 그걸 직접..

회사 업무나 개인 개발 프로젝트를 장소에 구애받지않고 진행해보고자 맥북에어를 질렀다. 아주 오래전 2006년쯤? 흰둥이 맥북을 산 이후 거의 18년만에 다시 사보는 맥북이다. (흰둥이는 골동품으로 아직도 보관 중) 원래 윈도우즈 신봉자이고 아직도 더 좋아하긴하지만 최근 회사에서 맥을 사용해보면서 안정성과 좋은 면모들을 많이 발견해서 한번 다시 써봐도 좋겠다~라고 판단되었다. 애플 제품들은 사용해보면 묘하게 기분좋은 면들을 발견하게 되는데 곰곰히 생각해보면 소프트웨어 ui ux보단 하드웨어의 매력이 훨씬 큰 것 같다. 개인적으로 애플의 소프트웨어 ui ux는 사용자를 많이 배려한다고 생각하진 않는다. os전반적으로 글자도 매우 작은 편이며 아이콘도 누르기 힘들정도로 작다. 그 외에도 불친절한 면들이 많다...

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

웹컴포넌트 활용 테스트를 마치고 본 프로젝트인 '서울시 유치원 정보 사이트 프로젝트'에 착수하려고한다. 기획에 앞서 혹시 내가 해보려고하는 유치원 정보 조회 사이트가 있는지 검색해보았는데 역시나 있었다... 이 방대한 api 자료를 가지고도 그걸 활용한 사이트가 없는게 이상하다고 생각되긴 했다만;; 내가 최초를 못찍었다는 부분에서 좀 아쉽긴 했다. 더군다나 거의 같은 api 정보를 활용해서 만들어서 그런지 내가 구상했던 사이트 구조와 거의 일치했다 ㅜㅜ  이런 부분들이 아쉽긴 했지만 그래도 만들어보는게 의미있다고 판단해서 실행해보기로 했다. 어차피 지금 제작의 목적은 반짝이는 기획력을 보여주려는 목적이라기보단 나의 개발력을 향상하려는 목적이 가장 크기 때문에 유사한 사이트가 하나 더 나온다고해서 크게 문..