테이블 연습 심화과제 연습과제 캡쳐화면에 제시된 표와 유사하게 디자인해보세요! https://kiranworkspace.com/demo/projects/code-snippets/table/user-table/ 1. 개발자 도구에서 폰트 크기나 색상을 참고해서 구현해주세요! 2. 시맨틱 태그로 전체 뼈대 구조를 잡고 시작해주세요! 3. 드롭다운 메뉴는 하실수 있으신 분만 시도해보세요! 프론트엔드/HTML & CSS 강의 2024.02.04
4. 대응의 원리 제어장치(controller)를 조작할때 보여지는 디스플레이나 인터페이스를 사용자가 예측할 수 있도록 하는 것이다. 예를 들어 로그인 버튼을 눌러 로그인에 성공하면 홈화면으로 가겠구나라는 예상이 된다. 또는 블로그에서 글작성 완료 버튼을 클릭하면 내가 작성한 글을 보여주거나 글목록 화면으로 이동하겠구라고 예측할 수 있도록 디자인하는 것을 말한다. 에어비앤비 헤더를 보면 사용자가 숙박할 수 있는 숙소의 카테고리가 나오는데 이탈리아 사람이든 한국 사람이든 아시아 사람이든 누가 봐도 클릭하면 어떤 숙소들이 화면에 보여질지가 예상가능하다. 에어비앤비 숙소 리스트를 살펴보면 대응의 원리가 숨어있다. 예약할 숙소사진의 좌측하단에 해당 숙소를 공유하는 호스트 사진도 함께 보여준다. 이는 해당 숙소의 주인이라는 것을 .. 디자인/디자인 원리 2024.01.25
3. 멘탈모델과 콘셉트모델 멘탈모델이란 사용자가 실제 생활에서 경험하고, 지식으로 터득한 기대치나 예상치를 의미한다. 예를 들어, 형광등 전원 스위치를 생각해보자. 전원 스위치는 위아래로 온오프하는 것이 일반적이고 그렇게 경험으로 학습되어 있다. 그래서 새로운 전원 스위치를 개발한다고 하더라도 신제품의 사용법도 유사할 것이라고 기대한다. 이것이 멘탈모델이다. 실제 신제품의 사용법은 동일할수도 동일하지 않을수도 있지만 아무튼 신제품 자체는 콘셉트 모델이다. 디자인/디자인 원리 2024.01.25
2. 행동 유도성의 원리 사용자가 제품이나 서비스를 처음 사용하려고 할때 직관적으로 어떻게 사용하는지 알 수 있도록 하는 것을 말한다. 즉, 설명서 없이도 고민하지 않고 쉽게 사용할 수 있도록 유도하는 것이다. 예를 들어 위와 같이 어떤 프로그램을 설치한다고 해보자. 설치과정은 꽤나 복잡하고 번거로운 과정이다. 이때 위와 같이 기본값을 미리 선택해두는 것은 좋은 행동 유도성을 가지고 있다. 왜냐하면 사용자는 라디오버튼이나 체크박스를 어떻게 사용하는지 모를수 있는데 위와 같이 체크된 상태와 체크되지 않은 상태가 모두 보이기 때문에 사용자에게 라디오 버튼이나 체크박스를 사용할 수 있도록 힌트를 준다. 두번째 이유로는 사용자는 해당 프로그램을 처음 사용하기 때문에 선택할 옵션에 대하여 잘 모를 가능성이 높다. 이때 기본값을 설정해두면.. 디자인/디자인 원리 2024.01.25
1. 일관성의 원리 * 사용자의 편안함 화면의 레이아웃, 색상, 폰트크기 등이 항상 일관성을 유지하면 사용자는 익숙함과 편안함을 느낀다. 익숙하다는 것은 사용자가 다음에 오는 행동에 대하여 예측이 가능하다. 일관성이 없으면 사용자는 새로운 앱이 나올때마다 사용법을 다시 배워야 하기 때문에 불편함과 피로함을 느낀다. 예를 들어 애플의 ios 에서는 탭 바를 하단에 두도록 권고하지만, 구글의 안드로드이는 상단에 위치시킬 것을 권장한다. 그래서 아이폰 사용자들은 앱을 사용할때 탭바가 주로 하단에 있음을 경험하였기 때문에 새로운 앱을 설치하더라도 탭 바가 하단에 있을 것이라고 예상한다. 만약 탭바가 상단에 위치한다면 아이폰 사용자는 불편함을 느낄것이다. * 작업시간 단축 및 재활용성 앞서 설명한것처럼 디자인 가이드 문서나 디자인 .. 디자인/디자인 원리 2024.01.25
UX 디자인의 개념 UX 개념 UX 는 User Experience 의 줄임말로 사용자가 어떤 제품이나 서비스를 통해 경험하는 모든것을 의미한다. 단순히 웹상이트나 앱에서 경험하는 가상의 경험뿐만 아니라 실제 생활에서 겪는 물리적인 경험도 포함된다. 예를 들어, 길거리를 걸어가는데 목적지까지 안내문구가 길바닥에 적혀있어서 길을 찾기 쉬웠던 경험이라던지 까페에 가서 좋은 커피향을 맡으면서 음악을 들은 기분좋은 경험과 같은 모든 것들이 UX에 해당한다. UX 디자인 디자이너의 직감이나 생각이 아닌 사용자 관점에서 사용자가 겪을수 있는 경험을 디자인하는 것을 의미한다. 사용자가 현재 제품이나 서비스를 사용하면서 가지고 있는 문제나 불편함을 해결하는데 중점을 둔다. 교보문고에 가면 중간에 책을 읽을수 있는 넓은 테이블이 있고, 위.. 디자인/UX디자인 2024.01.25
로컬에서 브랜치 병합 및 충돌 상황 이해하기 * 로컬에서 브랜치 병합하는 방법 main 브랜치에서 test 파일을 생성하고 a_ 라는 코드를 추가한다. 해당 변경이력은 로컬저장소에 커밋한다. modal 브랜치를 생성하고, 해당 브랜치로 이동한다. 여기서 기존의 test 파일에는 c_코드를 두번째 줄에 추가하고, new 라는 새로운 파일에는 b_ 코드를 추가한다. 그 다음 해당 변경이력을 마찬가지로 로컬저장소에 커밋한다. 브랜치를 병합하려면 main 브랜치로 먼저 이동한다. 여기서 git merge [통합하려는 브랜치명] 을 실행하여 특정 브랜치의 변경이력을 main 브랜치에 통합한다. 이때 main 브랜치의 a_ 코드와 modal 브랜치의 a_ 코드가 동일하면 성공적으로 병합이 이루어지며, main 브랜치는 그저 modal 브랜치의 변경이력을 그대.. 깃허브 2024.01.22
인터넷 용어 - ipconfig 의 기본게이트웨이와 서브넷마스크 https://rangerang.tistory.com/m/49 [네트워크] IP, 서브넷마스크, 게이트웨이 오늘의 목표 : ip, 서브넷마스크, 게이트웨이에 대해 알아보기 아래는 윈도우의 cmd 창에서 ipconfig를 입력하면 나오는 내용이다. 내 컴퓨터의 사설 ip주소는 192.168.0.101이고, 서브넷 마스크는 255.255. rangerang.tistory.com 웹 (web) 2024.01.22
깃허브 입문시 참고할 자료 https://dreamsea77.tistory.com/313 GIT 입문편 Git의 기본 시작하기 안녕, 하카타에서 태어난 원숭이 킥킥이야. 오늘은 나랑 같이 버전 관리 시스템, 'Git(깃)' 을 공부해보자. 여러분은 파일을 편집 전 상태로 되돌리고 싶을 때 어떻게 하고 있 dreamsea77.tistory.com 깃허브 2024.01.22
개발시 자주 사용하는 깃 명령어 정리 git init 버전관리할 로컬저장소를 생성하는 역할 git add 현재 디렉토리에 있는 파일 중에서 버전관리가 필요한 파일을 선택하는 역할 git diff 현재 디렉토리의 변경된 모든 파일들의 변경사항을 확인하는 역할 git commit 현재 디렉토리에서 git add 로 선정한 파일들의 변경이력을 로컬저장소에 저장하는 역할 git commit -am git add 와 git commit -m 의 축약명령어로 해당 명령어는 git add 를 따로 해줄 필요 x git push 로컬저장소의 변경이력을 원격저장소인 깃허브에 업로드하는 역할 git remote add [원격저장소 닉네임] [원격저장소 URL] 로컬PC에서 변경이력을 원격저장소에 업로드할때 원격저장소의 URL주소를 로컬 PC에 등록하는 역할 .. 깃허브 2024.01.22