배이글
프로덕트 디자이너가 알면 좋은 CSS
01. CSS도 파일이다!index.html과 style.css 라는 이름의 파일을 일반적으로 많이 사용함. 02. CSS 파일 위치**head 태그 안에 link라는 이름으로 위치  CSS파일의 위치 ">                                                   ㄴ>  ./style.css                                                    ㄴ> index.html과 같은 경로에 위치해야 함  03. CSS 만들기 h1 {         color : brown ;             ㄴ선언 (declaration) : 속성과 값을 합한 부분      } 1) 선택자 (selector): 어떤 HTML 요소에 스타일을 적용할지 선..
디자이너가 공부하는 HTML, OG Tag, Git을 통한 배포까지
강의 듣고 필기한 내용 정리  01. html 기본 태그들로 구조 잡고 홈페이지 내용 삽입하기index.html  02. OG Tag*** head 태그 안에 삽입하기 meta property="og:title" content="멋쟁이민주처럼"> meta property="og:description" content="개발연습중.."> meta property="og:image" content="./thumbnail.jpg"> title, description 적어주고 이미지 주소도 써주기.html과 같은 파일 안에 있다면 ./파일명.확장자 형태로! 03. 대망의 배포1) 깃허브 레포 생성레포 이름은 깃허브아이디.github.io(근데 꼭 이렇게 해야되는걸까? .. 선생님이 그렇게 하라고 하셨다..)   ..
우리같이 작은 조직도 디자인 시스템이 필요할까요?
24년 8월, 사내에서 UX팀과 FE팀을 대상으로 했던 UX 세미나 발표자료를 아카이빙 합니다.(2024 인프콘 디자인시스템 세션을 참고했습니다)
프로덕트 디자이너가 알면 좋은 HTML
HTML : 텍스트에 생명을 불어넣는 것             내용ㄱ 안녕하세요 :) ㄴ여는태그              ㄴ닫는태그  1. HTML 속성class="memo">안녕하세요 :)      : HTML 속성       속성이름="속성값"   => 여러 속성을 작성할 때는 한 칸씩 띄고 작성하면 됨  2. HTML 주석: 작성은 되어있는 코드를 브라우저에 뜨지 않도록 무시 임금님 귀는 당나귀 귀! --> but.. 브라우저에 나오지 않는다고 주석을 남용하면 안됨.html 파일은 주석을 포함한 모든 정보를 가져오기 때문에, 보안에 유의해야 함.  3. HTML 문서구조: Boilerplate라고 통칭함.    : html문서라는 것을 선언. 일반적으로 제일 첫줄에 기록.     : 어떤 언어로 시..
동아리 프로덕트 디자인 시스템 구축기 2 - 레거시 컬러 청산
* 이 시리즈는 SOPT makers 라는 동아리에서 주니어 디자이너들이 힘을 합쳐 애정하는 프로덕트의 디자인 시스템을 구축했던 사이드 프로젝트 이야기입니다. 디자인 시스템 구축이라는 거대한 프로젝트의 리딩을 맡으며 좌충우돌 성장했던 1년간의 기록을 아주 자세히 적어봅니다.  우선 mds(makers design system)구축을 시작하며 수많은 회사들의 디자인 시스템 구축기들을 검색했다. Figma 커뮤니티에서 레퍼런스 삼을 UI Kit들을 찾고, 웹페이지로 멋지게 만들어둔 시스템들을 구경했다. 분명 많은 도움이 되었지만! 0부터 시작하는 우리에게 꼭 맞춘 듯 필요한 자료는 아니었다. 아무리 찾아봐도 어떤 방식으로 레거시를 걷어냈는지, 어떤 기준을 가지고 서로 다른 컴포넌트들을 맞추어 나갔는지, 어떻..
동아리 프로덕트 디자인 시스템 구축기 1 - 배경과 서막
* 이 시리즈는 SOPT makers 라는 동아리에서 주니어 디자이너들이 힘을 합쳐 애정하는 프로덕트의 디자인 시스템을 구축했던 사이드 프로젝트 이야기입니다. 디자인 시스템 구축이라는 거대한 프로젝트의 리딩을 맡으며 좌충우돌 성장했던 1년간의 기록을 아주 자세히 적어봅니다. 0. 일단, 회사원이 왜 동아리를? 그리고 무슨 동아리인데요?대학생 시절, 휴학을 하고 모든 열정을 바쳐 활동했던 동아리가 있었다. 대학생 연합 IT 벤처 창업동아리 SOPT. 2번의 기수를 수료한 것도 모자라 임원진인 디자인 파트장까지 맡아 운영했으니 말 다했다. 학부에서 배운 것보다 훨씬 더 많은 것들을 알려주고, 멋진 인적 네트워크 속에서 많이도 성장했다. 개발과 디자인, 융합 전공자로서 "나는 디자이너가 맞는가?"라는 정체성 ..
2024 인프콘 Infcon UX 세션 정리
2024년 8월 2일 인프콘에 참여해 UX 세션을 들으며 개인 노션에 메모한 글을 재발행 했습니다. UX writing (배달의민족)> UX writing이 왜 어려울까?가이드가 모든 것을 커버할 수 없음같은 표현도 맥락에 따라 지향/지양이 갈린다. ex) ‘불가’ 와 같은 부정의 표현.임시로 브레이크타임이라 주문이 불가한 상황 등맥락에 따라 결정하기 어려움한국어의 미묘한 톤 문제누구나 개입하기 쉬움ux라이팅 → 결정하기 / 설득하기 어렵다!라이팅 작업 시간 느낌만으로 결정하기 어렵다. 탄탄한 라이팅 논리가 필요함.> UX writing에서 가장 중요한 두 가지말투에서 정보로 관점을 바꾼다말투 (어떻게 말할지) how to say 말투 : 주관적일 수 있음 (친절해요 vs 진심같지 않음)정보 : 기획/디..
디자이너의 git & github 고군분투 정복기 2
01Git 동작 흐름과 구성 요소  [local 영역] = 자기자신- working directory : 현재 작업중인 프로젝트가 위치한 디렉토리. 모든 작업은 여기서부터 시작. 내가 작성한 코드들이 담긴 파일이라고 보면 됨. (명령어 init)- staging area : commit 할 파일의 예비 저장소.  *commit : 소스가 변경되거나 새로 작성이 되면 사진찍듯이 로컬 저장소에 저장됨. 이 1건의 커밋으로 변경되는 것을 버전이라고 함.- local repository(저장소) : 존재하지만 눈에 보이지는 않음. working directory로부터 커밋한 내용들이 저장. 특정 시점의 변경사항으로 돌아갈 수 있음. (복원 가능) [remote 영역]- github 등 외부에 위치한 원격 저장소..
디자이너의 git & github 고군분투 정복기
01Git : 소스 이력 추적을 위한 버전 관리 시스템Github : git 프로젝트를 관리하는 저장소 제공   02Git 설치법 1) 터미널 실행2) xcode-select --install 입력 후 실행3) brew 설치4) git credential manager 설치 ...라고 한다. 차근차근 따라해보자..   1) 터미널 및 터미널 대체제 설치 후 실행 강의에서는 터미널 대신 iTerm을 설치하라고 했는데, 나는 과외쌤ㅋ인 멋쟁이 서버개발자님의 추천을 받아 Warp 라는 다른 프로그램을 설치했다! (왜 굳이 터미널 두고 다른걸 쓰는지 궁금해서 과외쌤 및 개발자 칭긔들에게 물어봤다.)iTerm, Warp 이 두 프로그램은 Mac의 기본 터미널 대신 활용할 수 있는 터미널 프로그램들이며, 다양한 확..
디자이너가 이해하는 HTML, CSS, JavaScript
01HTML, CSS, JS HTML   : 구조 / 내용CSS { }  : 브라우저에 내용이 보여지는 모양과 스타일JS { ; }  : 사용자의 액션에 따라 동적으로 보여지는 이벤트 / 반응  02HTML (.html)= HyperText Markup Language문서 작성 시, MS에 word를 많이 사용함.word에서는 텍스트의 서식을 설정할 수 있는데, 이런 텍스트들의 역할이 다 정해져 있음! (본문, 제목 등)html은 이런 워드와 구성이 비슷함. HyperText : 웹에서 다뤄지는 텍스트들이 정적 X, 링크를 가지는 형태.Markup : 텍스트의 구조 혹은 의미를 부여- Tag라는 형식 사용 (여는 태그, 닫는 태그)- ex. 제목 이런거~  03CSS= Cascading Style S..
디자이너가 이해하는 IP, Port 그리고 DNS
01네트워크란?막연한 느낌이지만, 웹서비스의 밑바탕이자 구조이기 때문에 알아둘 필요가 있다! 컴퓨터가 두 대 있다. 이 두 대를 연결한다면?-> 서로 필요한 데이터를 송/수신 할 수 있다. = 상호작용 가능-> 두 대 이상의 컴퓨터가 연결된 체계를 네트워크라고 한다. (인터넷이 연결되지 않아도요!) 그러니, 네트워크란?두 대 이상의 컴퓨터가 연결된 통신망이다.어떻게 데이터가 오가는지 이해하는 것이 핵심!   02네트워크의 구성요소 개별 컴퓨터 : host여러 대의 컴퓨터를 하나의 네트워크망 안에 연결하기 위해서는, 이를 묶어주는 장비가 필요 : 스위치하지만, 스위치는 다른 네트워크에는 접근할 수 없다.그래서 라우터(aka 공유기)가 등장! (차별점 : 서로 다른 네트워크 간의 통신이 가능.) 네트워크와 ..
1

티스토리툴바