# UIUX

pioneering

✏️ 글쓴이 Avark Agency 📰 원본 제목: UX/UI Design Patterns In Blockchain & Crypto: A Complete Guide To UX In Web3 발행일: 2023. 7. 14. https://avark.agency/learn/article/blockchain-ux-design-guide/ 🗺️ 내용 3 reasons why UX is crucial in web3 Blockchain UX Patterns Digital Wallets UX Patterns DeFi UX Patterns NFT UX Patterns Play-to-Earn Gaming UX Patterns

june4248

🔥 11주차 학습일지 START 최종 발표 전 마지막 주인 이번 주는 계속해서 개인 프로젝트 작업과 발표 준비를 했다. 원장쌤께서 데드라인을 일찍 잡으신 덕분에 항상 긴장의 끈을 놓지 않고 작업을 한 결과, 드디어 내 디자인 작업도 끝이 났다!!!!! 🎉 (부끄러워서 블러처리🤭) 한 달이라는 시간 안에 이렇게 기획부터 디자인까지 빠르게 작업했던 건 처음인 것 같은데 무사히 끝마칠 수 있어서 다행이다! 이번 주에 겪은 시행착오, 어려운 점은? 1️⃣* 최종 발표준비* 금요일 오후에 최종발표를 리허설하는 시간을 가졌는데 아무래도 아직까진 발표준비가 전반적으로 부족하다고 느껴졌다. 목소리를 좀 더 키우고 발표자료도 더 시각적으로 잘 보여질 수 있도록 보완해야겠다

jungmin211

UI 컴포넌트의 필요성 > 화면이 복잡하고 다양해도 기본적인 레이아웃 구성 내부에서 반복적으로 사용되는 UI들이 있으며 UI 컴포넌트를 도입함으로써 코드량을 줄일 수 있으며 개발 기간 단축에도 기여할 수 있다는 장점이 있다. 디자인 시스템?? ▷ UI 컴포넌트들의 모음을 구조화하는 방법으로 서비스를 만드는 데 공통적으로 사용한 컬러, 서체, 인터렉션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해놓은 것이다. 시간과 비용을 줄이기 위해서 UI 패턴을 재사용하는 방식을 도입하고 있으며 재사용이 가능한 UI 컴포넌트들로 이루어져, 복잡하고 견고하며 사용자가 접근하기에 용이한 사용자 인터페이스를 구축할 수 있다. Modal Component Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 레이어를 까는 것으로 팝업창과는 차이가 있다. Modal 버튼을 누르면 Modal 창이 껴지고 꺼질 수 있는 기능을 구현해보았다. event 버블링을 막아주는 sto

jungmin211

Figma??? UI디자인과 프로토타이핑 분야에서 인기있는 툴로 와이어프레임, 프로토타입, 브레인스토밍, 디자인 구축 등 여러 분야에서 사용할 수 있는 Figma를 다루는 방법을 배웠다. 피그마는 실시간 협업 기능, 다양한 환경을 지원, 자동 저장 및 버전 관리, 다양한 무료 폰트, 오토 레이아웃 기능, 프로토타이핑 등 개인에게 무료로 제공하고 있어서 사용해보니 유용한 툴이라고 생각이 되었다. 피그마는 실시간 협업 기능으로 여러명이 동시에 작업할 수 있다. 페어분과 함께 해보니 서로의 작업을 바로 확인할 수 있으므로 효율적인 툴이고 매력있다고 느껴졌다. 아직 기능이 사용하기 쉽지 않지만 천천히 익혀보고자 한다. 피그마로 간단한 툴 사용해보기 *피그마 홈페이지 처음화면

june4248

😱 10주차 학습일지 START (말이 되나요.. 벌써 10주차가 지나다니...ㅠㅠ) 1. 이번 주에는 어떤 것을 배웠을까? 🔍 HTML & CSS [한창호T] >Javascript : 함수(Function) 함수는 특정한 기능을 구성하는 코드를 하나의 이름으로 정의한 기능 묶음이다. 이를 모듈화라 하는데, 모듈화가 잘된 함수는 재사용성이 높다. 함수는 기능을 정의하는 부분과, 정의된 기능을 호출하는 부분으로 작성된다. 함수를 정의하는 방식은 익명함수, 기명함수, 화살표 함수 등 3가지로 분류할 수 있다. >파라미터 & 리턴 함수의 파라미터는 함수명 옆의 괄호안에 작성하는 변수로, 외부의 데이터를 내부로 전달하는 역할을 한다. 내부로 전달된 파라미터는

june4248

🤓 9주차 학습일지 START 팀 프로젝트가 끝난 첫 주 - ❗️ 이번 주는 크게 1️⃣ 지난 팀 프로젝트 리뷰 2️⃣ 개인 프로젝트 주제 선정 & 작업을 진행했다. 1️⃣ : 발표와 디자인 작업물을 리뷰하는 시간을 가졌다. 장황했던 발표자료를 최대한 요약하고 시각적인 가독성을 높여 다시 만들었고, 스크립트에 의존하지 않고 말하는 연습을 했다. 스크립트 또한 불필요한 설명을 줄여 발표시간을 많이 단축시킬 수 있었다. 디자인 리뷰 시간에는 지난 결과물에서 보완되면 좋을 부분들을 여쭤보았고, 메인 페이지의 아티클 섹션에서 좀 더 해당 아티클 내용에 맞는 이미지들로 변경되면 좋겠다는 코멘트를 받았다. 다시 한번 이미지 선정은 페이지의 전반적인 분위기를 좌우하는 중요한 부분임을 느꼈다. 2️⃣ : 개인 프로젝트는 대부분 하나의 브랜드를 선정해서 리디자인 작업을 하지만 나는 그동안 리디자인 프로젝트를 공모전이나 학부 수업에서 진행했던 경험이 있기도 했고, 개인

_dodo_hee

UIUX 이쁘면 다냐 🤷‍♀️ 왜 갑자기? 최근에 사이드프로젝트도 많이 해보고 있고, 이직 준비를 하면서 겪었던 과제를 해결하면서 내가 어떤 개발자이지? 내가 지금 뭐를 중심적으로 개발했지? 라는 생각을 하게 됐다. 공통적으로 내가 대답한 답은, "사용자의 쉬운 경험, 사용자의 익숙한 경험"을 중시 했던 것 같다. 내 생각 뿐만이 아니라, 실제로 프론트엔드가 UIUX를 공부 해야할 이유가 있다. 유저들의 기대치와 요구사항이 계속 변화하고 있다. 경쟁이 치열한 시장에서는 우수한 UI/UX가 제품 또는 서비스의 주요 차별화 요소가 되고 있다. 더 나은 경험을 위해 기술적 혁신과 함께 UI/UX 디자인 및 개발도 계속 발전하고 있다. 이런 생각들을 하다 나와 같은 연차와 나와 같은

sangpok

Bottom Sheet? Drawer? 부르는 명칭이 정확하진 않지만 머 여튼 이런 식으로 하단에 위치해있고, 드래그를 하면 추가적인 정보를 확인할 수 있는 UI를 일컫는다. 보통 모바일 앱에서 많이 사용하는 UI! 이번에도 역시 많은 삽질을 했다 ... 😇 차근차근 구현 과정을 기록해보겠다. 0. 구조 및 스타일 잡기 나는 다음과 같이 구조를 잡았다. Back Layer는 배경으로 깔릴 View을 말한다. 여기에 BackgroundOverlay 같은 걸 깔아서 후처리를 해주려고 했는데,, 이것도 후에 서술. Header는

june4248

🐥 Intro 이번 주, 드디어 1차 팀 프로젝트 최종 발표가 끝났다!!! 👏🏻 👏🏻 👏🏻 막상 끝나고 나니 후련하기도 하고, 아쉬움도 많이 남는다. 앞으로 남은 2차 개인 프로젝트도 열심히 준비해야겠다! 아좌좌!! 👊🏻 원장님께서 저녁으로 사주신 서브웨이!! 😋 & 유난히 비가 많이 왔던 이번 주 ☂️ 1. 이번 주에는 어떤 것을 배웠을까? 🔍 피그마 [박수진T] 이번 피그마 업데이트에서 새롭게 추가된 Variables 기능에 대해 배웠다. Variables은 스타일 기

yujin1228

작성자가 모르는 용어 위주로 정리된 포스팅입니다. 추가용어들은 ref. 링크들을 참고해주세요! 🤔 시작하며 최근 프로젝트를 시작하며 기획 및 디자인컨셉 회의를 진행하게 되었는데 낯선 디자인 용어들 때문에 소통에 어려움을 겪었습니다. 웹 프론트엔드 개발자로서 웹 UI 컴포넌트 용어들을 알아두면 기획자, 디자이너와 더 원활한 소통을 할 수 있지 않을까 하는 생각에 생소한 용어들 위주로 정리해 보았습니다! 🔍 자세히 1. 와이어프레임 와이어 프레임은 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합입니다. 2. UI / UX UI UX는 단어는 익숙히 알고 있었는

sangpok

리액트에서 음악 재생바를 만들 일이 있어서 만들어 보았다. 은근 신경써야 할 부분들이 많아서 재밌었던 개발! 일단 슥슥 생각나는 대로 작성한 거라 코드가 꽤나 많이 복잡하다. 코드는 정리해서 따로 올려보도록 해야겠다. 개발 포인트 보기엔 쉬워보였는데 디테일한 UX들이 많아서 꽤나 생각할 게 많았다. Buffer를 포함한 터치 포인트 자세히 보면 ProgressBar 자체가 아니라 위 아래로 buffer만큼 선택 범위가 확장된 것을 볼 수 있다. ProgressBar 크기 자체가 워낙 작다 보니까 정확하게 그 지점을

june4248

7주차 학습일지 🐥 Intro 점심식사 전 빠르게 찍은 나의 소중한 점심.. 📷 메뉴는 항상 뭘 먹어야할 지 고민이지만 넘나 행복한 고민인걸..? 😋 학원 근처에 맛집이 많아서 좋다 ㅎㅎ 1. 이번 주에는 어떤 것을 배웠을까? 🔍* UX/UI 핵심이론 [백경찬T]* [디자인 트렌드] >- 2019년 : 5G시대의 시작 초고속(영상,VR,3D) / 초연결(동시연결) / 초저지연(이동성) 멀티 디바이스 및 플랫폼 디바이스 플랫폼 / OS플랫폼 / 서비스 플랫폼 [디자인 시스템] >구글 머터리얼 디자인 시스템, 휴먼 인터페이스 가이드라인 https://fluent2.microsoft.design [컨텐츠 매니지먼트 시스템] CMS(contents managemen

sangpok

DropdownFAQ Usage 구현 간단한 UI Component라서 설명을 덧붙일 건 없는 것 같다. 조금 그래도 포인트를 잡을 수 있는 건 ~ icon-24 아이콘을 넣을 때마다 항상 같은 클래스를 지정해주고 있어서 tailwind component로 생성해주었다. Usage Text Wrap Balance 텍스트 콘텐츠의 내용이 폭 보다 많은 내용을 가지게 되면 텍스트가 아래로 내려가게 되는데, 이때 내려가는 기준을 적절히 설정해줄 수 있는 속성이 text-wrap이다. 다만 이 속성은 실험 속성이라 유의해야 한다. 관련 링크 지금

sangpok

InputStepper Usage 구현 Step Count만 하면 되는 간단한 UI Component라 딱히 설명할 게 없긴 하다. min, max 사실 Figma에서는 min, max에 대한 유스케이스를 다루진 않았다. 그러나 이 UI Component를 사용한다면 분명이 필요한 속성이라고 생각해서 임의로 추가했다. disabled 엣지 케이스에 대해 생각해보자. value가 min일 때 minus를 한다면 다음과 같은 선택을 할 수 있겠다. 그대로 -1하기 max로 넘어가기 아무 동작 안 하기. 보통은 3번이겠다. 그러면 이 3번을 구현하려면 어떤 식으로 하는 게 좋을까? value가 min일 때 클릭하면 아무 동작 안 하기 valu

sangpok

이번에는 DatePicker를 만든다. 그동안 DatePicker를 쓸 일이 있으면 딱봐도 만들기 귀찮아서 라이브러리를 가져와서 구현을 했는데, 이번에 직접 구현을 해보니 아주 생각대로 귀찮고 나름 구현하는 재미가 있더라요. 날짜 관련한 로직은 나름대로 알고 있다 생각했는데, 이번에 만들면서 꽤나 부족하다는 걸 느꼈고 다 만들고 나니 실력이 확실히 는 것 같은 느낌이 든다! 이 맛에 직접 구현하는 거죠~ DatePicker 이번 UI Component의 코드는 유난히 간데, 그 이유는 이번엔 나름 렌더 최적화랑 코드 분리를 하려고 노력했기 때문. 그런 것 치곤 아직 분리나 최적화할

june4248

6주차 학습일지 🐥 Intro 이번 주에는 웅진씽크빅 실무진분들과의 만남을 가질 수 있는 세션이 있었다!! 2시간가량 진행된 세션에서는 웅진씽크빅이 나아가고자 하는 방향성이나, 웅진씽크빅에서 함께하고 싶은 디자이너의 역량에 대해 알아갈 수 있었다 :D 세션이 끝난 이후엔 추가적으로 웅진씽크빅의 10년차 디자이너님께서 지금 우리 팀이 하고 있는 프로젝트 시안에 대한 가감 없는 피드백을 주셔서 매우 유익했다 👍🏻 1. 이번 주에는 어떤 것을 배웠을까? 🔍 UX/UI 핵심이론 [백경찬T] [레이아웃 및 그리드] 레이아웃 디자인 요소 : 정보 전달이 잘 되면서 아름답게 대상을 공간에 배치하는 것 그리드 시스템 : 레이아웃을 합리적이고 쉽게 할 수 있도록

ubermensch0608

복잡한 form 웹 서비스에는 수 많은 정보 입력이 있고, 유저들은 서비스를 사용하기 위해 일러주는 타이핑 양식을 바탕으로 빈칸을 채운다. 회원가입할 때 마주하는 빈칸들을 봤을 때 입력하기 귀찮았던 경험이 분명 있을 거다. form에는 유저와 상호작용하는 input, select/option, button 등의 요소와, 적절한 스타일의 변화는 유저가 form 작성을 성공적으로 마칠 수 있도록 이끄는 가이드이다. 프론트엔드 개발자로서 유저의 form 이용에 대한 고민으로 불편함을 최소화하는 것이 필요하다고 생각하여 어떤 것을 고민해야하는지 알아보았다. 클라이언트 양식 유효성 검사 필요성 [MDN](https://developer.mozilla.org/en-US/docs/Le

sangpok

이번엔 Select Box를 구현해보려고 한다. 중요한 사실은~ ` 객체는 스타일링이 가능하지만 드롭다운 되는 ` 객체는 스타일링이 불가능하다. 그러므로 select + option 조합이 아니라 다른 방법으로 구현을 해야 한다. 여기에서는 div와 ul, li를 사용하였다. InputSelect Usage 후기 디자이너와의 소통 만들면서,, 디자이너분이 꽤나 많이 헤맸다는 느낌을 많이 받았다(ㅋㅋ) SelectBox의 예외 케이스에 대한 스펙이 없었기 때문. 옵션이 Scrollable한 건지, 아래에 화면이 부족하면 위로 뜨게 할 건지 아님 끝에 맞춰서 보여줄지, 선택한 상태에서 또 열면 border가 그대로 블랙인인 건지 어떤 건지! 물론

sangpok

개인적으로 가장 만들고 싶었던 UI컴포넌트~ InputBox는 기본적으로 대응해야 할 케이스가 아주 다양하기 때문에 그걸 한번 유연하게 처리해보고 싶었다. 특히나 이렇게 state가 존재하는 inputbox는 또 분기 처리하는 게 까탈스럽기 때문에...! 잘 해보고 싶은 욕심이 들었다. InputText 아~ tailwind 이번에 프로젝트 끝나면 진짜 안 써야지😇 한 번 거슬리니까 계속 거슬리네 신경쓴 점 Pseudo-class를 최대한 활용하기 ...를 하고 싶어서 [input 태그의 pseudo-class](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/inpu

sangpok

RadioButton 지금까지는 Uncontrolled Component로 만들었었는데, 라디오는 Controlled Component로 만들어보려고 한다. 사실 이렇게 만들었어야 했는데 결심한 것처럼 말하기ㅋㅋ 그러서는 Radio Button의 특성상 Group으로 묶어주는 역할이 필요하고, 그 Group과 자식들이 값을 공유해야 한다. 이를 위해 Context를 만들어 공유해주었고, Group 컴포넌트를 만들었다. RadioContext RadioGroup RadioButton before style 저번 TextIconButton을 만들 때는 pointerhover:hover:안에 before를 계