공부하는 디자이너

UX 디자이너는 코딩을 배워야 할까 디지털 서비스 디자이너는 반드시 코딩을 배워야 한다. 코딩을 잘 한다고 훌륭한 디자이너가 되지는 않지만, 훌륭한 디자이너가 되려면 코딩을 반드시 배워야 한다. 대학의 디자인 학과에서도 코딩을 반드시 가르.. story.pxd.co.kr 디자이너로서 내 강점과 정체성이 무엇을까 생각해본다. 예전엔 드로잉 능력을 어필했는데 최근엔 "저는 코드에 친숙한 디자이너입니다!" 를 어필하는 캐릭터로 잡고 있다. 성과가 얼마나 돌아올런진 모르겠지만... '코드에 친숙하다'고 표현할 때 개발 대신 코드라는 단어를 사용한 이유는, 1. 일단 나는 개발을 못하고 (브라우저의 단순 인터랙션과 CRUD의 R만 가능한 상태) 2. 내가 하는 걸 함부로 개발로 승격시키고 싶지 않다. 포토샵을 깔..

https://ko.reactjs.org/ 공식 사이트가 설명이 잘 되어 있어서 이걸로 공부를 하기로 했다. 다행히 한국어로 잘 번역되어 있다. 우선은 주요개념 파트를 마스터하는 것이 중요하다. 1. Hello World 2. JSX 소개 3. 엘리먼트 렌더링 4. Component와 Props 5. State와 생명주기 6. 이벤트 처리하기 7. 조건부 렌더링 8. 리스트와 Key 9. 폼 10. State 끌어올리기 11. 합성 vs 상속 12. React로 생각하기 총 12가지 문서로 되어 있고 이 12가지 개념을 익히면 리액트의 큰 줄기는 다 훑는 것이라고 한다. 물론 이것 또한 초보자에게 친절하다고는 말하긴 힘들다. 차근차근 설명하다가 어느 순간 "예시를 보여줄테니까 나머지는 니가 혼자 이해해봐..

※ 정보처리기사 실기 대비 정리입니다. 개인적인 정리용도라 자세한 설명이 부족할 수도 있습니다. DML이란? 튜플과 속성값의 검색, 삽입, 삭제, 변경을 수행한다. 종류로는 SELECT, UPDATE, INSERT, DELETE가 있다. * 예제문은 아래의 테이블을 기반으로 작성했다. 1) SELECT - 검색 // SELECT 속성명 FROM 테이블명 WHERE 조건 SELECT name, major FROM 학생 WHERE grade=4; 2) UPDATE - 갱신 // UPDATE 테이블명 SET 속성=변경내용 WHERE 조건 UPDATE 학생 SET major='시각디자인' WHERE name='김영희'; null인/null이 아닌 칼럼을 찾아서 업데이트 해줄 수도 있다. UPDATE 테이블명 S..

※ 정보처리기사 실기 대비 정리입니다. 개인적인 정리용도라 자세한 설명이 부족할 수도 있습니다. 1. SQL은 아래 3가지로 구성되어 있다. 총 2개 글로 나누어서 정리할 예정. 정의 (DDL: Data Definition Languae) 조작 (DML: Data Manipulation Languae) 제어 (DCL: Data Control Language) + TCL(Transaction Control Languae) 2. SQL은 대소문자를 구분하지 않는다. 그러나 예약어는 대문자로 작성하는 것이 좋다. (실제로는 MS-SQL이냐 오라클이냐에 따라 세부 문법이 다르다. 여기서는 일반적인 문법만 다룬다.) DDL이란? DDL은 테이블과 뷰 등을 생성하고 수정, 삭제한다. 데이터가 지켜야 할 제약조건도 ..

최근에 에디터 유목민 생활을 하면서 느낀 점을 적어볼까 한다. 이건 디자이너의 관점이라는 것을 전제로 한다. 그리고 요즘 좋은 에디터는 다 오픈소스고 확장기능도 비슷비슷해서 "OO 확장기능이 좋다" 는 뻔한 이야기도 제외하겠다. 1. VS CODE "코드 에디팅을 재정의하다" - 제작 : Microsoft 현재 세계적으로 점유율이 가장 높은 대세 에디터. 급하신 분들은 아래는 안 읽어도 됩니다. 묻지도 따지지도 말고 VS Code 쓰세요. [장점] 1. 대세 of 대세 사람들이 많이 쓰는데는 이유가 있다. 생태계가 방대해서 다양한 추가확장 기능을 제공한다. 또한 MS 언어와 호환성이 좋아서 특정 기술을 사용하는 개발자들에게는 매우 편리하다고 한다. 2. 손 델 필요가 없는 스마트한 기본 기능 이미 코딩에..

The Complete CSS Flex Box Tutorial Much like CSS Grid (my other Medium tutorial) Flex Box is quite complex because it consists of not one but two element types: The container… medium.com Flex Box에 대한 총정리 글을 발견했다. 글 하나에 한눈에 볼 수 있도록 깔끔하게 정리가 되어 있어서 시중에 나와있는 CSS 책보다 이 글이 훨씬 낫다. 예전에는 반응형페이지를 만들 때 float와 퍼센트 margin 값을 브레이크 포인트마다 조정해야 했는데, flex는 화면크기에 적응해서 스스로 크기와 위치를 조정할 수 있기 때문에 간단하고 유용하다. 아니 간단하다고는..

JSON(Javascript Object Notion)은 Javascript 객체 문법을 따르는 문자 기반 데이터 형식이다. 언어 종류에 상관없이 데이터를 제어하기 위해 만든 표준 규약 같은 것이다. 서버단과 클라이언트단에서 데이터 통신을 할 때 번거로움을 대폭 줄여주어 XML의 강력한 대체자로 급부상했다. 참고로 한국에서는 "제이슨"이라고 읽고 영어권에서는 "제이썬"이라고 읽는다. [관련문서] https://www.json.org/json-ko.html https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON 1. JSON의 자료형식 String Number Obejct Array Boolean - true, false Null ※ Jav..

1. 심플한 오버레이 슬라이더 ▶[강의영상] 바닐라 자바스크립트로 "캐러셀 슬라이더" 만들기 (Vanilla JS : making Carousel slider) 화면전환에 중점을 둔 기본 형태이다. 방향 화살표나 페이징 기능은 없지만 안에 이미지나 컨텐츠를 풍부하게 넣으면 꽤 쓸만한 캐러셀이 될 것 같다. 또는 원페이지 디자인에서 백그라운드 요소로 활용해도 좋을 것 같다. 1) HTML & CSS 1 2 3 4 5 2) Javascript const SHOWING_CLASS = "showing"; const firstSlide = document.querySelector(".slider__item:first-child"); function slide(){ const currentSlide = docume..

jQuery를 이용한 Modal 을 제작해보았다. "보여진다", "감춘다" 두 가지 직관적인 기능만 구현하면 되기 때문에 jQuery 문법만 구조만 이해하면 쉽게 작성할 수가 있다. Modal은 활용도가 높기 때문에 꼭 익혀두길 추천한다. 1) HTML 레이어팝업입니다. 레이어팝업입니다. 레이어팝업입니다. 레이어팝업입니다. Close Modal 예시입니다 팝업창 열기 는 Modal 창이 떴을 때 배경을 블라인드처럼 어둡게 처리하는 역할을 하는 블록이다. 2) jQuery : Modal 기능 $(document).ready(function(){ $modal = $(".modal"); $(".modal--open").click(function(){ $modal.show(); return false; }); ..