요즘 디자인 계에서 핫해지고 있는 마이크로소프트 디자이너에 대해 말해보고자 한다. 마이크로소프트 디자이너는 마이크로소프트 사에서 나온 이 웹사이트는 사용자가 주제를 던져주면 기존에 있는 템플릿을 이용하여 자동으로 디자인을 해준다. 일단 이 글의 제목이자 가장 궁금한 질문인 '마이크로소프트 디자이너는 디자이너를 대신할 수 있을까?'라는 질문에 답하자면 '아직은 아닌 것같다.' 이다. 왜냐하면 아직은 정식 출시 전이고 가지고있는 템플릿이 얼마없어서 그런지 디자이너들이 한 디자인보다 예쁘다고 할 수는 없다. 왜 그러냐고 한다면 첫쨰. 디자인의 종류가 아직은 부족하고 예쁘지 않은 디자인이 많다. 그렇지만 아직 정식 출시 전이고 chat gpt도 chat gpt 4가 나오기 전까지는 문법적, 시간적 오류를 알아채..

한국 사람이 가장 많이 사용하는 음악 어플은 무엇인가? 라고 한국 사람에게 물으면 대부분이 '멜론'이라고 생각할 것이다. 그러나 사실은 유튜브 뮤직이 가장 높은 점유율을 가지고 있다. 유튜브 프리미엄과의 연동으로 인해 사용하는 사람들도 많겠지만 나는 멜론의 UI가 옛날과 달리 개편 된 후 상당히 복잡하고 정신없다고 생각한다. 그럼 예전 멜론의 UI를 보고 가장 최근의 멜론 UI를 보자. 위 사진은 약 2020년도 멜론사진이다. 이때는 어플에 들어오자마자 아티스트 소개 배너, 최신음악, 음악 재생 차트가 보이게 된다. 위 멜론은 2023년 4월 14일의 멜론의 모습이다. 이제 사용자가 멜론을 들어가자마자 바로 볼 수 있는 것은 아티스트 소개, 최신음악, 음악 차트가 아니라 다른 사람이 만들고 좋아요가 높은..

이번 디자인은 과학수업에서 생물다양성을 주제로 SW와 연관지어 발표하라는 과제를 맡게되었다. 나와 내 팀원 친구는 고민을 하다가 집에서 키우기에 힘든 식물(물, 햇빛, 영양분 때문에)을 A GROw 어플안에서 성장시켜 식물이 전부 성장하게 된다면. 집으로 받거나 기부를 할 수도 있다. 이런 목적을 가지고 어플 디자인을 하였고 사용자가 어플을 사용하므로써 얻을 수 있는 것을 식물은 직접 기르고, 집으로 직접 배송을 받거나 환경에 기부하므로써 보람참과 성취감을 얻을 수 있고, 삭막한 빌딩 숲에서 나만의 식물을 기르며 스트레스를 줄일 수 있다.

지금 동아리에서 뮤직플레이어&음악 스트리밍 웹에 대한 디자인을 고민중이라 첫번째 주제는 스포티파이로 잡았다. 사실 스포티파이에 국한되는것은 아니고 스포티파이를 필두로 한 다양한 음악 사이트의 UI/UX를 한번 보며 좋은 점 아쉬운 점을 적어보겠다. 위에 화면은 스포티파이의 pc화면이다. 장점은 깔끔해보이고 직관적으로 뭐가 뭐인지 알 수있다. 단점은 왼쪽 바에 플레이리스트가 너무 주르륵 배열만 되어있다는것이다. 내가 좋아하는 음악이나 내가 들었던 곡을 찾기 어려워 사용자가 클릭을 잘하지 않을 수 있다. 아래 사진은 핀터레스트에서 발견했다. 한 유저가 스포티파이의 디자인을 리디자인한 것이다. 이 디자인의 장점은 일단 음악을 틀고 끄는게 플레이리스트를 틀지않는 이상 왼쪽에서 다 해결이 가능하다는 것이다. 그리..

학교 자율동아리에서 나는 웹 디자인을 맡게되었다. 그러나 나는 디자인에 대한 지식이나 경험이 부족하기에 디자이너 분들이 유튜브에 올려놓으신 영상들을 봤는데. 거기서 많은 디자이너 분들이 레퍼런스(예시작)를 고르고 왜 이 레퍼런스 골랐는지, 이 레퍼런스의 좋은 점이 뭔지를 기록하라고 하셔서 에브리데이 위드 레퍼런스를 시작하게 되었다!

사용자로부터 데이터를 입력받아 서버로 전달할 때 사용된다 서버에서는 데이터를 처리하여 실행 결과를 사용자에게 전달한다 텍스트 상자, 버튼 같은 형태의 폼을 만드는 데는 HTML사용(프론트엔드) 데이터를 처리하는 데는 서버 프로그래밍을 이용(백엔드) form 태그 폼을 만든다 action : 데이터를 처리할 서버 상의 스크립트 파일주소 method : 입력받은 데이터를 서버에 전달할 방식 지정(get|post) get:주소에 데이터를 추가하여 전달하는 방식, 데이터가 주소 입력창에 그대로 드러나며, 전송 데이터 크기가 제한적이다(4,096byte) post:데이터를 별도로 첨부하여 전달하는 방식, 데이터가 드러나지 않고 데이터 크기의 제한이 없다. 보안 및 활용성이 좋다. input 태그 폼에 입력하는 칸..

웹 페이지는 레이아웃을 구성하기 위해 공간을 분할하는데, 공간 분할 태그를 사용하면 레이아웃을 자유롭게 구성할 수 있다. div태그 div는 분할을 뜻한다 HTML요소를 논리적인 섹션으로 분할하여 스타일을 지정할 때 사용한다. 태그를 사용하여 공간을 분할하면 한 줄을 전부 차지 div는 블록 태그입니다. h3은 블록태그입니다. p는 블록태그입니다. span태그 텍스트를 분할하여 일부 텍스트에 스타일 속성을 지정할 때 사용한다. 텍스트 크기만큼 공간을 차지한다 //기본형식 내용 ////////// span태그는 인라인 태그 링크태그는 인라인 태그 q태그는 인라인 태그 블록태그와 인라인태그 블록 레벨 요소 : 내용을 블록으로 묶어서 처리하며 한 줄을 전부 차지, 너비(width)와 높이(height)를 가질..

HTML5에서는 웹 브라우저 안에서 멀티미디어(이미지,오디오,비디오)를 직접 재생이 가능하다 (꺽쇠기호 는 아쉽게도 쓰지 못했다. 이점 감안해 주시길) 이미지 태그 img img태그를 사용하여 웹페이지에 사진, 그림 등 이미지를 넣을 수 있다. src : 이미지 파일의 경로를 지정함 alt : 대체 텍스트를 지정함 width, height : 이미지의 너비와 높이를 지정함 오디오 태그 audio audio태그를 통해 웹 페이지에 오디오를 삽입 audio scr="이미지 주소" alt="대체문자열" controls video video태그를 통해 웹 페이지에 비디오 삽입 태그를 사용하면 미디어 파일을 여러 가지 형식으로 제공할 수 있다.