# UI

woongzz0110

들어가기 전에 인터페이스라는 단어는 비단 개발자 뿐만 아니라 일상생활을 하면서도 굉장히 많이 접하게 되는 단어이다. 하지만 이 단어가 가지고 있는 진정한 의미를 알고 있는 사람들은 많지 않다. 어쩌면 나도 인터페이스라는 단어를 잘 알고 있나 싶지만, 개인적으로 생각하고 있는 그 의미를 한 번 생각해보았다. 물론 내 생각이 정답은 아닐 수 있고, 사람이나 상황마다 그 의미는 충분히 달라질 수는 있다. 인터페이스의 의미 > 인터페이스는 서로가 이어질 때마다 만나는 접점이다. 서로의 대상은 여러가지가 될 수 있다. 사람과 사람, 사람과 물건, 물건과 물건, 코드와 사람, 코드와 물건, 소프트웨어와 소프트웨어, 소프트웨어와 하드웨어, 하드웨어와 하드웨어 등 뭐든지 인

chepchep2

Drawer 메뉴 만들어보기 Scaffold에 drawer: Drawer() 위젯 추가 Drawer() 안에 코드 ListView() 여러개의 위젯들을 넣어 리스트로 쓸 수 있다. UserAccountDrawerHeader() 사진에서의 Drawer의 위쪽에 있는 위젯이 UserAccountDrawerHeader이다. accountName, accountEmail이 필수이고 currentAccountPicture, otherAccountPictures를 써서 사진을 넣어줄 수 있다. onDetailPressed를 사용하면 아이콘(삼각화살표)이 애니메이션 효과처럼 보이고, 사용할 수 있다. ListTile() 하나의 타일로 Row() 비슷한걸 만들 수 있다. 클릭도 되고, leading(왼쪽), trailing(오른쪽) 등을 써서 아이콘들을 넣을 수 있다.

chepchep2

1000 시작 Appbar leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때 사용 actions: 복수의 아이콘 버튼 등을 오른쪽에 배치할 때 사용 onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 넣는 곳

heonylee98

Jetpack Navigation 알아보기 https://developer.android.com/codelabs/android-navigation?hl=ko#1 Jetpack Navigation dependencies https://developer.android.com/jetpack/androidx/releases/navigation?hl=ko#groovy Jetpack Navigation 구성요소 navigation_graph app의 모든 위치와 사용자가 앱에서 이동 가능한 모든 정보가 포함된 리소스 파일 NavHostFragment navigation이 작동할 fragment NavController navigation_graph에서 현재 위치를 추적하는 객체 navigation을 통해 이동 시 NavHostFragment의 화면 전환 Bottom Navigation 적용하기 navigation을 통해

jkjkbk

2021.3.19f1 기본 구조 1) ScrollView > - Scroll Rect 컴포넌트 > - a) Content : Slot들의 부모 오브젝트 > - b) Horizontal, Vertical : 스크롤 방향 > - c) Horizontal/Vertical Scrollbar : 스크롤바 > - d) Viewport : a) Content의 머리와 끝이 정지할 위치(기준선)으로 참고할 UI의 > RectTransform. 비워둔다면 Scroll Rect가 부착된 현재 게임 오브젝트의 RectTransform를 기준으로 함. > ![](https://velog.velcdn.com/images/jkjkbk/post/4bd1b994-c070-42e3-8dc5-e82

bugrice

📌TagMark 프로젝트 > - UI 초안 > - 간단하고 직관적인 디자인 선택 > - 검,흰,노 조합의 색 디자인 > - 북마크 관리 웹 페이지 제작 > - React 또는 Vanilla JS 사용 예정 > - 피그마 > 📱계산기 앱 > ### 2주차 예정 > - 기능 구현 완료 > >[깃

bami

MUI(Material-UI)는 Material Design을 구현해놓은 라이브러리입니다. 라이브러리를 연동 후 컴포넌트를 사용하듯이 가져다 조립하면 쉽게 디자인을 할 수 있습니다. Material Design 간단하게 Material Design이 뭔지 간단하게 이야기해볼까 합니다. MUI를 학습하는데 필수적으로 알아야할 지식도 아니고 세세하게 다룰 것도 아니라서 관심 없으시면 바로 다음 문단으로 가시면 됩니다. Material Design은 Google에서 만들어낸 플랫 디자인 기반의 디자인 시스템입니다. 플랫 디자인은 기존의 현실적이고 현실적인 디자인으로 기존에 인기를 끌던 스큐어모픽(skeuomorphic)을 심플하고 직관적이게 디자인하고자 등장했습니다. 대표적으로 애플의 IOS 운영체제가 스큐어모픽에서 플랫 디자인으로 넘어간 시기의 디자인을 제대로 보여주고 있습니다. ![](https://velog.velcdn.com/images

cakecoder

[ https://oil-place-3e8.notion.site/f573d3b054f34bca8bd387501b17ee35) 홀릭스는 직장인부터 취준생, 취미러까지 모든 개인의 성장을 돕는 플랫폼이다. 줄곧 이 플랫폼의 클래스들, 각종 커뮤니티를 눈독들이며 나만의 시기를 기다리던 찰나 ! 드디어 일주일 전, 디자인 커뮤니티에 가입을 했다. 언제부터인가 관심이 생겨버린 UX 디자인, UX Writing, UI/GUI 등 이 분야들과 관련된 디자인 직종에 종사하고 계신 선배님들의 이야기들이 궁금했기 때문이다. 하루는 UX 관련 아티클을 올려주셔서 '오! 무슨 내용일까!' 유심히 들여다보니 참... 아는 단어들이 거의 없었다. 분명 한국말로 써있는데... 때마침 현재 듣고 있는 클래

tennfin1

예전(2022.08)에 구현했던 이야기와, 그 방식입니다. 현재의 방식과는 차이가 있고, coposed를 이용한 ui 설계방식이 아니오니 참고 바랍니다. 깃허브 링크입니다 배달의 민족이나, 요기요 같은 배달 어플에서 자주 보이는 UI입니다. 해당 상태에서 화면을 잡고 움직이면 가운데 마커는 고정되고, 뒤의 지도만 움직입니다. 그리고 드래그하던 지도를 놨을 때, 가운데 마커를 기준으로 마커의 기준의 주소가 나옵니다. 해당 과정을 수행하는 법 지도 api의 내부의 함수를 찾습니다. 해당 함수 중, 지도 drag가 끝났을 때 수행하는 이벤트를 찾습니다. drag가 끝났을 때

hanni66

참고 이 블로그와 ChatGPT를 통해 Test 연습을 진행했다. ios-unit-testing-and-ui-testing-tutorial 그리고 GitHub에 있는 코드와 커밋 기록을 참고하면 좋다. TestingTest - GitHub 테스트를 작성하기 전 기본 사항 핵심 기능 모델 클래스, 메서드 및 컨트롤러와의 상호 작용 가장 일반적인 UI 워크플로(workflow) 경계 조건 (Boundary conditions) 버그 수정 Unit Test란? → 사용하려는 기능이 개발자의 의도에 맞게 동작하는지 테스트를 하는 작업이다. "FIRST" 원칙 Fast (속도) 빠른 속도로 테스트를 수행할 수 있도록 설계

onegold-11

📌 네온, 글로 효과 회사에서 개발할 때 위 이미지처럼 빛나는 UI를 요청받았는데, 이런 효과를 네온, 글로 효과라고 한다. 다만 안드로이드에는 글로 효과가 없기 때문에 그라이데이션, 블러 등 을 사용해 만들어야 한다. xml과 compose에서 글로 효과를 만드는 방법에 대해 설명하려 한다. 📌 xml xml을 사용한 기존 UI에서는 Paint 속성에 있는 BlurMaskFilter를 사용해야 한다. 하지만 속성을 적용하고 그리면 흐린 효과만 나타나기 때문에 흐려지지 않는 부분을 추가로 그려줘야 한다. 아래 코드에서 bodyPaint는 흐려지지 않는 부분을, glowPaint는 흐려지는 부분이다. 사용할 때는 다음 코드처럼 사용한다. 근데 코드를 실행해보면 글로 효과가 잘려있을 것이다. 안드로이드는 기본적으로 canvas에 그려지는 것이 뷰의 크기를 벗어나지 못하기 때문으로 보인다. 이를 해결하려면 다음 방법들이 있다. 먼저 GlowView의 부모 클래스

pyopyopyo

첫 번째 게시글을 어떤 글을 쓸까 고민을 하던중 올해 초 입사를 하고 처음 업무를 받아 사용했어서 기억에 남는 ReorderableListView 위젯 에 대해 작성해 볼것이다. > ReorderableListView ReorderableListView 위젯은 ListView 위젯과 비슷하지만, 사용자가 리스트 아이템을 스크롤 가능한 리스트 내에서 재정렬할 수 있는 기능을 제공하는 위젯이다. 이를 통해 리스트 아이템의 순서를 사용자 정의로 변경할 수 있으며, 이 기능은 다양한 앱에서 유용하게 활용될 수 있다. > 코드 작성 일반적인 ReorderableListPage 위젯에서 리스트 랜덤의 아이템들을 배치하여 아이템을 추가 , 삭제 할수 있는 기능을 넣어서 간단한 예제 코드를 작성했다. ReorderableListView 위젯은 화면을 그리고 아이템의 순서를 변경하는 데 필요한 두 가지 주요 매개변수를 가지고 있다. 이 위젯을 사용할 때 먼저 chi

kmkim2689

1. 문제 상황 > 작업을 진행하던 중, 일반적인 앱바와는 다른 양상의 디자인을 마주하게 되었다. 앱바에 아이콘을 넣는 지극히 평범한 작업으로 보였지만... 일반적으로 해오던 방식으로 하는 것은 어림도 없음을 몰랐다... 특정 게시글의 썸네일을 앱바의 배경으로 설정해야 하는 상황에서, 단색 아이콘을 사용하면 사진에 따라 아이콘이 보이지 않는 경우가 발생한다. 그 이유로 아이콘에 shadow 효과를 달라는 요구사항을 받았고, 평소처럼 svg 형태로 저장하여 xml로 변환해서 써야겠다는 안일한 생각으로 작업을 진행하였다. 코드는 다음과 같이 작성하였고, (문제 상황에 관한 코드만 작성, 많은 사항들이 생략되어 있음) 그리고 Preview를 통하여 확인한

cjb0325

(velog오류로 09.08날짜로 안올라간걸 다시올립니다..ㅠㅠ) Substring메서드 알고리즘을 공부하다가 알게된 Substring 메서드에 대해서 좀더 자세히 알아보기. String.Substring C#에서 문자열을 자를때 Substring 메서드를 사용한다. String.Substring(a,b); 여기서 a는 시작위치 index를 말하고 b는 자를 문자열의 길이를 말합니다. UI 특강 튜터님께서 해주신 UI특강의 내용중 일부. 저번에 명시했던 개인프로젝트를 다

paenge1004

🐧 들어가기 앞서 주말이다! 주말에도 열심히 과제를 구현했다. 토요일은 UI를 전체적으로 통일했고, 오늘은 오디오를 재생할 수 있게 기능을 구현했다! 🐧 오늘 배운 것 09.09 - UI 09.10 - Audio 🐧 기억할 것 & 진행 골드메탈님의 강의를 통해 배열로 다양한 소리를 관리하는 AudioManger 제작방법을 알게 됐다. 약간의 응용이 필요했는데, 강의는 단일 Scene에서 모든게 이루어지지만, 팀 프로젝트는 StartScene과 MainScene에서 이뤄진다. 그래서, 게임을 플레이하는 GameManager는 MainScene에 존재하는데, AudioManager를 어디에 둬야할지 고민이었다. 답은 간단했다! 게임이 시작되고, 처음 Audio가 나오는 Scene은 StartScene다. 따라서 StartScene에 구현했다! 🎇 UI UI는 MainScene의 GameOver와 전체적인 UI 디자인