designer DK의 블로그

지난주 가족들과 간만에 교외로 나갔는데 괜찮은 카페가 있어서 포스팅하게 되었다. 파주 출판단지에 위치한 밀크북이라는 카페. 가게 앞 사진인데 가게 앞 말고 약간 더 들어가면 큰 전용 주차장이 있어서 주차도 매우 편리하다. 카페 내부는 매우 크고 도서관처럼 책도 많이 열람할 수 있다. 특이한 점은 2층에 블록놀이를 할 수 있는 공간이 있는데 약간의 추가금액을 내면 원하는 블록을 재미있게 만들어 볼 수 있다. 옛날에 어릴 때 만들었던 과학상자도 구경할 수 있어서 신기했다. 빵도 커피도 맛있었다 😋😋 아이 데려오면 널찍한 공간에서 편하게 쉬다가 갈 수 있는 카페. 다음에 또 한번 가봐야지👍

평생 윈도우즈 기반 컴퓨터를 사용하다가 최근에와서야 맥을 사용하면서 좋은 점도 많이 느끼지만 일부 불편한 점도 있었다. 그 중 대표적인게 기본 mac os에서 잘라내기 기능. 윈도우즈로 치면 컨트롤 x가 안되는 부분이었다. 희한하게 맥 기본 메모장이나 다른 여러 어플리케이션에서 제공을 해주면서 파인더를 비롯한 기본 os상에서 잘라내기가 안되는 부분이 이해가 되지 않았다 ㅜㅜ 맥에서 잘라내기가 존재하지 않는 이유는 잘라내기라는 기능을 복사하기(command+C)와 똑같이 진행한 후, 붙여넣을 때 command+option+V로 진행하면 잘라내서 붙여넣기를 할 수 있기 때문이었다. 물론 여기에 익숙하다면 상관없겠지만; 다른 모든 프로그램이나 앱, 윈도우즈 os에서 어찌보면 국룰로 x키를 통해서 잘라내기를 해..

약 두 달 전에 시작한 개인 프로젝트인 ‘킨더서울’ 웹사이트를 드디어 오늘 배포하였다. 아직 몇가지 아쉬운 부분이 있지만 그런 부분들은 일단 배포 후 조금씩 다듬어나가보려고한다. https://kinderseoul.netlify.app/   깃허브에 올라간 파일을 넷틀리파이(netlify)로 연결해서 간단하게 배포를 진행했다. 넷틀리파이는 깃허브 데이터를 그대로 연동 배포 가능해서 굉장히 사용이 편리하다.    마지막 작업은 디자인을 css로 옮기는 작업이 대부분이었고 자잘하게 막힌 부분들도 있었지만 큰 어려움 없이 완수할 수 있었다. 사이트는 데스트탑, 태블릿, 모바일 모두 커버할 수 있는 반응형 웹사이트로 구축했다. /* ----------------미디엄 레이아웃 : 태블릿--------------..

프로젝트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 R&D를 진행 했었고, 그 테스트를 통한 가정을 프로젝트 실전에 적용을 해보려고 시도했다. 일단 예상했던 부분은 카드 디자인들을 컴포넌트로 많이 사용하지않을까로 예측했었는데 막상 카드들의 생성 자체가 for문으로 반복 생성된 부분들이어서 이를 굳이 컴포넌트화 시킬 필요는 없겠다고 판단했다. 따라서 페이지별로 반복되게 사용되는 부분을 찾아보니 '헤더+타이틀'과 '푸터'였고 이 두 가지 부분만 컴포넌트화 해보기로 결정했다. 지난번에 미리 진행해 본 방법대로 진행을 해보았는데…(웹 컴포넌트 테스트 1 - https://designerdk.tistory.com/6)(웹 컴포넌트 테스트 2 - https://designerdk.tistory..

피그마로 진행된 디자인에 대해 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(..