전체 글 58

EQ Hub 컨트랙트 라이브러리 UX/UI 개선 프로젝트

Summary블록체인 인프라 서비스 EQ Hub는 유저가 복잡한 코드 없이 손쉽게 블록체인 컨트랙트를 개발할 수 있도록 컨트랙트라이브러리라는 기능을 제공해준다. 이 프로젝트는 이 컨트랙트라이브러리 부분의 UX/UI를 개선하는 스프린트.  Project goal기존에 구축되어있던 컨트랙트라이브러리가 유저 친화적이지 않은 UX로 설계되어있다는 판단을 내부적으로 하게됨. 그에따라 전반적인 UX/UI 개선을 통해 유저 편의성과 비주얼 퀄리티를 개선하는 목적.  기존 컨트랙트라이브러리 Depth1 페이지 문제점컨트랙트의 분류가 표준+용도가 애매하게 뒤섞여있어 유저 입장에서 사용하고자 하는 컨트랙트를 직관적으로 찾기 힘듬.  기존 컨트랙트라이브러리 Depth2 페이지 문제점컨트랙트 세부 페이지도 전체적 디자인이 너..

웹컴포넌트 만들어보기 테스트2 class와 template 활용

어제 자바스크립트로 웹컴포넌트 만들어보기 테스트를 진행하고 블로그 포스팅도 올렸었는데 유튜브 채널 드림코딩의 이 영상을 보고나니 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object)https://www.youtube.com/watch?v=_DLhUBWsRtw머릿속에 아주 어렴풋하게만 떠오르던 class의 개념이 좀 더 명확하게 정립되었고 그게 정립된 후에 어제 테스트해보았던 이 코드를 보니까 class CustomInput extends HTMLElement {    constructor() {        super();        this.attachShadow({ mode: 'open' });                const template = document.getEl..

생 javascript 기반 웹컴포넌트 만들어보기 테스트

디자이너로써 디자인을 하면서도 컴포넌트는 굉장히 유용하게 쓰는 편인데 개발 공부를하면서도 컴포넌트 개념을 꼭 활용하고 싶었고 그러기 위해 리액트도 맛뵈기로 조금 공부를 해봤었다. 리액트에서의 컴포넌트는 정말 사용성이 편리했었는데 다만 다른 부분에서 아직 개발 초보가 접근하기 힘든 개념이 많았었다. (스테이츠 등등...) 그래서 좀 더 기본기를 다지면서 컴포넌트를 활용할 수 없을까 고민해봤었다. 즉 생 자바스크립트 기반으로 개발하면서 컴포넌트를 자유자재로 사용하고 싶었고 그것에 대한 좋은 솔루션이 바로 '웹 컴포넌트' 개념이었다. 요즘 최애하는 개발 유튜브 채널인 코딩애플 영상 중 - 깃헙 개발자들이 React 안쓰는 이유 : Web Component https://www.youtube.com/watch?..

서울시 유치원 현황 웹사이트 프로젝트 시작 전 생각

최근 바쁜 일들로 인해 개발프로젝트를 잠깐 못하고 있었는데 다시 슬슬 해보고싶어져서 하나 또 해보기로 결심했다. 서울시에서 운영하는 서울열린데이터광장에는 생각보다 굉장히 디테일한 오픈api정보들이 많은데 어떤 주제로 사이트를 만들어볼까~고민하면서 둘러보다보니 서울시 유치원 현황 데이터가 눈에 띄었다. 아무래도 유치원 다니는 자녀를 둔 부모 입장이어서 더 그랬을 수도... 어쨌든 이런 좋은 데이터들이 있음에도 그냥 일반적으로 검색해봤을 때 이 정보를 활용해서 서울시 유치원 정보를 쉽고 보기 편하게 정리해놓은 사이트를 찾지 못했다. 그래서 내가 한번 그런 사이트를 만들어본다면 의미가 크지 않을까 싶어서 이번 프로젝트 주제로 잡아보았다. 이번엔 사이트의 비주얼을 엄청 신경쓰거나, 특별한 기능을 돋보이게 넣어보..

EQ Hub 데이터 솔루션 대쉬보드 프로젝트 (2024 JFWF ver.)

Summary블록체인 인프라 서비스 EQ Hub의 기술을 통해 제작된 서비스를 해당 서비스의 백오피스 관리자가 효과적으로 데이터 관리를 할 수 있게 만든 데이터 솔루션 대쉬보드. 그 대쉬보드 첫 Usecase인 2024 제주푸드와인페스티벌을(JFWF) 콘텐츠로 담고 있다.    Project goal애플리케이션을 통해 이벤트를 주최한 관리자가 해당 이벤트와 관련한 상세 데이터를 일목요연하게 파악하여 문제점을 인식하고 그 다음 서비스를 준비할 때 효과적인 자료로 활용할 수 있게 한다. (예: 어떤 요일, 어떤 시간대, 어떤 지역 고객 이용률이 컸음 -> 내년 이벤트 준비 시 해당 요일, 해당 시간대, 해당 지역의 상품을 확장 및 고도화하는 전략 가능) Challenge - 이벤트 주최자에게 실질적으로 도움..

환율 계산기 만들기 프로젝트

원래 내 첫번째 개발 도전 프로젝트였으나 중간에 한번 큰 벽에 막혀서 잠시 멈추고 다른 프로젝트 (한국 영화 박스오피스 순위)를 먼저 진행해보고 다시 재도전해서 완성한 프로젝트. https://currencyex.netlify.app  개발 독학 공부를 시작하면서 참고했던 유튜브 채널인 '코딩알려주는누나' 채널에서 알려준 환율계산기를 한번 만들어보고서 조금만 더 보강하면 제대로된 환율계산기를 만들 수 있겠구나~라고 생각했었지만 그건 큰 착각이었었다.막상 실제 api를 가져와서 진행해보니 여러가지로 예상치못했던 변수나 힘든 부분들도 많았다.  무료로 환율정보를 가져올 수 있는 api 를 열심히 찾다가 이 곳이 가장 적절해보여서 여기서 당겨왔었다.https://currencyapi.com/ Currency ..

한국영화 박스오피스 순위

나의 첫 공식 퍼스널 개발 프로젝트는 '한국영화 박스오피스 순위' 웹사이트였다. (약 1달 전 퍼블리쉬)원래 '환율 계산기' 사이트를 첫 공식 프로젝트로 제작하고 있었는데개발 중에 너무 심하게 막히는 부분이 있었어서 잠시 미루고나름 쉽게 도전해볼만하겠다?! 라고 생각해서 덤벼 본 프로젝트가 바로 이 프로젝트였다. 마침 영화진흥위원회라는 곳에서 일간 박스오피스순위, 주간 박스오피스 순위 등의좋은 오픈API 소스를 제공하고 있었고그 정보를 가지고 사이트를 만들어보면 재미있고 유용하겠다고 판단해서 만들어 본 사이트. https://koreanmovieboxoffice.netlify.app/ 깃허브 : https://github.com/designerDK/KOREAN-MOVIE-BOX-OFFICE   하지만 좀..

개발하는 디자이너

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