읽으면서 시작하는, 모든 디자이너를 위한 코딩
읽으면서 입문하는, 모두의 컴퓨테이셔널 디자인 인덱스
NJ's Computational Design Series/ 남주의 컴퓨테이셔널 디자인 시리즈
교양: 읽으면서 시작하는, 모든 디자이너를 위한 코딩 입문서
초급: 따라 하며 시작하는, 디자이너를 위한 크리에이티브 코딩
중급: 따라 하며 입문하는, 모두의 컴퓨테이셔널 디자인
커버 페이지1. 책 소개, 뒷이야기, 개인 출판의 이유, 종이책, 전자책, 오디오(비디오)책 - link
2. 책 구조, 목차 설명 그리고 앞으로 계획 - link
들어가면서
읽으면서 시작하는,
모두 디자이너를 위한 코딩 시리즈
BY
NJSTUDIO
NJSLAB
NJCHANNEL
부제 - link
1. 읽으면서 입문하는 모두의 컴퓨테이셔널 디자인 & 크리에이티브 코딩
2. 디자이너도 이해할 수 있는 코딩 & 프로그래밍
3. 디자이너라면 반드시 알아야 하는 코딩 & 컴퓨테이셔널 디자인
4. 디자인 & 컴퓨테이션 입문서
5. 데이터 & 디자인
6. 4차 산업혁명 & 디자인 도구
대상 - link
1. 코딩이 궁금한 디자이너분들
2. 디자이너 지망생, 실무자, 교육자, 연구자분들
3. 크리에이티브 코딩 실습 전에 기초 지식과 학습 방법이 궁금한 분들
4. 컴퓨테이셔널 디자인을 적용하려는 실무자, 혹은 도입하려는 관계자들
5. 4차 산업혁명과 디자인 데이터 그리고 코딩이 궁금하신 분들
6. 딱딱한 이론보다 디자이너에게 익숙한 예와 쉬운 설명을 원하는 분들
7. 디자인 방법론 코딩이 궁금한 개발자, 혹은 프로그래머분들
8. 컴퓨테이셔널 디자이너로서 좀 더 깊이 있는 공부 방향성을 잡고 싶은 분들
9. 컴퓨테이셔널 디자인을 통해 디자인 엔지니어링을 하고 싶은 분들
안녕하세요:) 이남주입니다! - link
2008년 “건축 영상 프레젠테이션” 집필 후 13년 만에 책을 통해서 여러분들과 다시 만나 뵙게 되어 참으로 감사하게 생각합니다. 2004년도 NJSTUDIO 스타트업을 시작하면서 디자인, 컴퓨테이션, 비주얼라이제이션 영역에서 18여 년 동안 그 산업의 변화와 함께 했고, 관련 지식과 경험을 선, 후배 동료들에게 나눌 수 있다는 것이 여간 기쁘고 감사한 일이 아닐 수 없습니다.
때때로 아웃사이더로, 비주류로 여겨지던 저의 전공영역들이 많은 학생과 실무자 교육자분들 심지어는 고등학생까지, 과거 그 어느 때보다 많은 관심을 보이는 요즘입니다. 국내외 수업, 개인 블로그, 유튜브 채널, 다음 브런치와 미디엄 등의 다양한 채널을 통해서 관심과 학습에 대한 열정이 느껴지며 그 변화를 체감하는 하루하루입니다. 격세지감을 느낍니다.
다른 필드에 비해 정보가 많지 않았던 만큼 스스로 학습 하고, 유학과 연구원 생활 그리고 실무를 통해 호기심을 채우며 물어물어 학습했던 기억이 있습니다. 특별히 2018년 겨울부터 본격적으로 유튜브 엔제이채널NJChannel프로젝트를 통해서 우리말 자료가 많지 않던 한국적 상황에 조금이나마 도움이 될 수 있음에 설레고 보람을 느꼈습니다.
학생, 연구자, 교육자, 실무자 분들이 다양한 피드백을 주고 있습니다. 긍정적인 피드백, 날카로운 첨언과 진심 어린 조언으로 작금의 변화된 미디어와 일상을 십분 활용하는 소통으로 우리의 정보 공유 활동도 꾸준히 할 수 있지 않았나 생각합니다. 또 다른 열매로 디자인과 코딩 그리고 컴퓨테이션을 궁금해하고, 시작하려는 디자이너 분들에게 이렇게 한 권의 책을 드릴 수 있어 감사합니다.
필자도 아직까지 호기심 가득한 학생의 입장에서 모르는 부분들이 많이 있을 것입니다. 또한 여러 관심사와 프로젝트, 연구에 쫓기는 하루하루를 보내며 여러분들과 마찬가지로 매일 자라나고 있는 상황입니다. 그러나 현재까지 소수로 취급받는 디자인 그리고 컴퓨테이션 영역에 한 명의 동료로서, 특별히 한국 산업계와 학계의 발전에 조금이라도 도움이 되기를 조심스럽게 희망하며 저의 경험과 지식 그리고 생각을 나누어 봅니다.
2021 뉴욕에서 이남주 드림
들어가면서 - link
왜 디자이너가 코딩을 배워야 할까요?
초 연결, 초 지능, 인공지능, 머신 러닝, 빅 데이터, 클라우드, 에지 컴퓨팅, 사물인터넷, 5G, 자율주행, 병열 연산, 블록체인 등, 다양한 4차 산업혁명 키워드가 있고, 각 계층의 다양한 산업들은 빠르게 변화하며 새로운 패러다임에 적극적으로 대응을 하고 있죠. 이러한 상황에 디자이너는 어떤 준비와 변화가 요구될까요? 4차 산업의 쌀인 데이터(디자인 데이터)를 활용하기 위해서 디자이너도 코딩이라는 도구를 배워야 해요.
코딩 없이 교양처럼 쉽게 시작할 수 없을까요?
‘읽으면서 이해하는 디자이너를 위한 코딩’ 형태로 컴퓨테이셔널 디자인을 이야기해 보려고 해요. 일반적으로, 코딩Coding하면, 따라 하기 튜토리얼이 주류를 이루고 있죠. 그도 그럴 것이 실습해 보고 그과정에서 이해와 깨달음을 챙겨가는 것이 사실이죠. 하지만 이 책에서는 코딩 없이 읽으면서 입문하는 것을 목적으로 하고 있어요. 이론과 개념을 먼저 이해하고, 종합적인 지도를 만들어 새로운 기술과 기회의 패러다임을 타고 넘을 수 있도록, 코딩을 공부하기 원하는, 코딩에 익숙하지 않은 디자이너를 돕고자 해요.
코딩, 전공이 아닌데도 알아야 할까요?
요즘 많은 디자이너들이 디자인과 코딩, 데이터와 인공지능, 컴퓨테이셔널 디자인 분야에 관심을 보이고 있어요. 전문적인 깊이 까지는 아니더라도, 대화가 가능한 수준의 이해와 컴퓨테이셔널 디자인의가능성에 대해서 궁금해 하시죠. 과거에 전통적인 디자인에서는 프로그래밍Coding & Programming을 컴퓨터 공학의 한 분야로 생각했었죠. 하지만 과거에 수기로 기록을 하던 것들이 도구의 발전으로, 한글, 워드, 엑셀을 사용하는 것처럼 이제는 그 분야가 전공이 아니더라도, 반드시 알고 이해해야 하는 시대, 곧 데이터 기반 사회가 오고 있는 것이죠.
보다 전문적으로 공부해 보고 싶다면?
학생, 연구자, 교육자, 실무자분들이 본격적으로 디자인을 위한 코딩 공부에 앞서 원리와 개념, 그것들의 연결고리를 파악하여 전체적은 구조를 알고 학습을 시작할 경우 효과적이고 선택적인 학습이 가능하죠. 코딩은 다양하게 사용되는 도구이기 때문에 나의 관심사와 목적에 맞게 어떻게 수준을 높여 나갈 것인가에 대한 전략이 필요해요. 필자의 국내외의 현장 경험, 강의, 연구, 실무를 통해서 느낀 피드백들을 정리하여 학습 자료가 충분하지 않은 상황에서, 시작하는 분들에게 적합한 시작 지점과 방향을 잡을 때 유용한 학습 지도가 되기를 희망해요.
목차
입문하기
CHAPTER 1 재료, 도구, 디자인 Material & Tool & Design - link
1 재료, 도구 그리고 디자인 Material & Tool & Design - link
1.1 도구와 기술의 발달 Tool & Technology - link
1.2 재료와 도구 그리고 디자인 Materials & Tool & Design - link
1.3 데이터 Data as Materials - link
1.4 데이터: 현상의 압축 & 통찰의 향연 - link
! 4차 산업, 디자인, 코딩 - link
! 데이터를 위한 코딩 - link
! 고 수준: 하이 레벨 High-level & 저 수준: 로우 레벨 Low-level - link
2 도구 : 컴퓨터 & 소프트웨어 Tool: Software - link
2.1 속도 Performance - link
2.2 지식과 기술의 합, 소프트웨어 Knowledge + Technology : Software - link
2.3 실제 도구에서 가상 도구 Physical Tool to Digital media - link
2.4 현상에서 시스템 Phenomenon to System - link
2.5 애플리케이션에서 퍼스널라이제이션 Application to Personalization - link
2.6 소프트웨어에서 커스터마이제이션 Software to Customization - link
! 지식의 빈익빈 부익부 - link
! GUI: 볼 수 있는 것은(것만) 조작할 수 있다. - link
CHAPTER 2 디자이너에게 코딩이란 Coding for Designers - link
3 디자이너가 왜 코딩을 해야 할까? - link
3.1 창의성의 도구? Code for Creativity - link
3.2 자동화의 도구? Code for Automation - link
3.3 최적화의 도구? Code for Optimization - link
3.4 데이터 때문에? Code for Data - link
3.5 디자인 방법론 때문에? Code for Design Methodologies - link
! 컴퓨터를 사용하는 것은 창의적이지 못하다? - link
! 쉽고 간단한 소프트웨어의 함정 & 공부 방법 - link
4 디자이너가 코딩을 해야 하는 이유 - link
4.1 일 할 수 있는 일꾼을 만든다 Code for Automation - link
4.2 균일한 품질 유지를 도와준다 Code for Quality Assurance - link
4.3 실험적 작업 Code for Experimentations - link
4.4 문제로서의 디자인 Code for Design Issues - link
4.5 솔루션으로서의 디자인 Code for Design Solution - link
4.6 데이터로의 디자인 Data-Driven Design Process - link
4.7 다양한 커리어 패스를 만들 수 있다 - link
4.8 진입 장벽을 높여준다 - link
4.9 경쟁력을 준다 - link
4.10 컴퓨테이셔널 사고 Computational Thinking - link
! 실력 그리고 경쟁력이란? - link
! 미래를 예측할 때, 펀더멘탈(fundamental)의 이해 / 변할 것과 변하지 않을 것 - link
CHAPTER 3 코딩 & 컴퓨테이셔널 디자인 활용 - link
5 큰 스케일에서 - link
5.1 지리정보 데이터 Geographic Information System - link
5.2 빅 데이터: 제3의 공간 Third Place Analysis - link
5.3 네트워크 분석 Network Analysis - link
5.4 공간정보의 보간 Interpolation - link
5.5 이미지 프로세싱 & 리모트 센싱 Raster Data & Remote Sensing - link
5.6 궁극의 디자인 옵션 The Best One - link
5.7 최적의 디자인들 Optimal Options - link
6 작은 스케일에서 - link
6.1 시각화 도구로의 기하학 Geometry - link
6.2 분석도구로의 기하학 Geometry - link
6.3 재료 Material 와 디자인 - link
6.4 패널의 패턴 - link
6.5 모듈의 배치 - link
6.6 디지털 패브리케이션 & 로봇틱스 Digital Fabrication Robotics - link
! 전공 용어를 쓰는 이유 - link
7 시뮬레이션 영역에서 - link
7.1 건축 구조 & 에너지 시뮬레이션 - link
7.2 이산화: 공간 단위 분할 Dense - link
7.3 이산화: 점 Particle 단위로 분할 Sparse - link
7.4 시뮬레이션 도구로 기하학 Geometry - link
7.5 환경, 조경, 시뮬레이션 - link
8 가상 영역에서 - link
8.1 웹사이트 Web Design & Coding - link
8.2 가상현실 & 증강현실 VR AR - link
8.3 메타버스 Metaverse - link
9 시각화 영역에서 - link
9.1 시각디자인 & 모션 그래픽 - link
9.2 디자인 시각화 Design Visualization - link
9.3 테크니컬 아트 Technical Art - link
9.4 미디어 아트 & 크리에이티브 코딩 Creative Coding - link
9.5 데이터 시각화 Data Visualization - link
9.6 트레이싱 & 매핑 Tracing & Mapping - link
9.7 클러스터링 Geo processing & Clustering - link
10 인공지능 영역에서 - link
10.1 이미지: Image & Raster Data - link
10.2 머신 러닝, 숫자Numeric 데이터, 시각 Perception 데이터 - link
10.3 데이터: 스마트 드로잉 & 커맨더 - link
10.4 복셀과 머신 러닝 Volumetric Representations & Machine Learning - link
! 인공지능에 대한 하나의 단상 - link
11 더 다양한 영역으로 - link
11.1 데이터 기반 사회와 산업의 변화 - link
! 그 많은 것 언제 다하나?1: 기초의 중요성 - link
! 컴퓨테이셔널 디자인의 현재와 미래 - link
CHAPTER 4 코딩 & 디자인 Coding & Design - link
12 디자인 & 코딩 & 프로그래밍 - link
12.1 코딩을 통한 디자인 - link
12.2 코딩이란 Coding - link
12.3 프로그래밍이란 Programming - link
13 디자인 & 컴퓨테이션 Design & Computation - link
13.1 컴퓨테이셔널 디자인 Computation - link
13.2 형태 Shape - link
13.3 좌표계 Coordinate System - link
13.4 색 Color - link
13.5 디자인 데이터 & 정보 Information - link
13.6 알고리즘 Algorithm - link
13.7 애플리케이션 프로그래밍 인터페이스 API - link
13.8 프로그래밍 Programming - link
! 비트맵 VS 벡터 그래픽스 - link
14 프로그래밍 패러다임 & 디자인을 위한 코딩 - link
14.1 프로그래밍 패러다임 Programming Paradigms - link
14.2 절차지향 & 룰 베이스 디자인 Procedural design & Rule based design - link
14.3 파라메트릭 디자인 Parametric Design - link
14.4 알고리즈믹 & 제너레이티브 디자인 Algorithmic & Generative design - link
14.5 에이전트 베이스 디자인 Agent-based design - link
14.6 그 밖에 적용... - link
! 컴퓨테이셔널 디자인(디자이너)의 보편적 인식과 오해 - link
! 컴퓨테이션Computation으로 만들어진 건축물? - link
CHAPTER 5 컴퓨테이셔널 사고 Computational Thinking - link
15 컴퓨테이셔널 사고 - link
15.1 컴퓨테이셔널 사고 주요 개념 Computational Thinking: Key concepts - link
15.2 암묵에서 명시로 From Implicit to Explicit - link
! 메타인지Metacognition와, 컴퓨테이셔널 사고, 디자인 - link
16 컴퓨테이셔널 디자인 사고 Computational Thinking for Design - link
16.1 분해와 패턴: 디자인 방법들 - link
16.2 명시적 기술: 알고리즘 - link
15.3 명시적 기술: 변수 & 파라미터 Variables & Parameters - link
16.4 알고리즘의 특징이 무엇 일가요? - link
16.5 디자인 & 도구로서의 코딩 - link
! 디자인 전공생의 걱정, 선택, 그리고 미래 - link
17 컴퓨테이셔널 디자인 적용 & 방법론 - link
17.1 가설, 상상, 질문하기 Question & Imagination & Hypothesis - link
17.2 방법론 & 접근법 The Methodology & Approach - link
17.3 정책 The Manifesto & Policy - link
17.4 구현 Implementation - link
17.5 공간 정보 Spatial Data Manipulation - link
17.6 도구 & 원칙 The Tool & The Principle - link
17.7 요약 Summary - link
! 알고리즘 학습 방법 - link
! 왜 컴퓨테이셔널 디자인에 배타적일까? - link
18 수학, 가장 엄밀한 언어 Numerical Description as Design Tools - link
18.1 엄밀함 - link
18.2 수 체계 - link
18.3 수학의 추상화 - link
18.4 상상의 도구 수학 - link
18.5 수학과 공간정보 - link
18.6 코딩 공부에 필요한 능력? 수학력? - link
! 난수Random에 대한 단상 - link
! 언어와 사고의 도약 - link
CHAPTER 6 코딩Coding 무엇을 기술하나? - link
19 코딩, 무엇을 어떻게 기술Description하나? - link
19.1 디자이너에게 필요한 언어 - link
19.2 그래서, 어떤 언어를 써야 해? - link
19.3 계산 그리고 ‘=’ 의 의미와 중요성 - link
19.4 상태와 메모리 State and Memory - link
19.5 비교와 반복 Conditional Statement & Loop - link
19.6 논리 덩어리, 함수Function - link
19.7 흔한 실수 - link
! 파이썬 Python 언어 공부 방법 - link
! 디자이너를 위한 C# 공부 자료 - link
20 코딩: 정보와 행위의 정의 - link
20.1 프로그래밍의 본질 - link
20.2 객체 Object - link
20.3 디자인 객체 Object - link
20.4 벡터 데이터 & 행위 Vector - link
20.5 데이터 구조로서의 지오메트리 Geometry as Data Structure - link
! 속도와 메모리 관리 - link
21 코딩: 공간정보 & 파이프라인 - link
21.1 자료구조: 선형 & 비선형 구조 Data Structure - link
21.2 공간정보 그리고 이산화 Discretization - link
21.3 그래프 데이터 구조: 위상 정보 Topology - link
21.4 픽셀 데이터 구조: 연속 정보 - link
21.5 공간 나누기 Partition - link
21.6 소프트웨어 아키텍처: 데이터 파이프라인 - link
22 버그와 디버그 Bug & Debug - link
22.1 버그의 분류 Types of software bugs and errors - link
22.2 디버깅의 자세 - link
22.3 고무 오리 디버깅 Rubber Duck Debugging - link
22.4 코딩 학습 요약 그리고 나아갈 방향 - link
! 브루트 포스Brute Force & 모테카를로Monte Carlo 방법론 - link
CHAPTER 7 학습 방향 Study Plans - link
23 코딩 학습 방법 - link
23.1 가장 익숙한 도구/ 환경에서부터 시작하자 - link
23.2 추천되지 않는 학습 방법 - link
23.3 디자이너로서, 컴퓨테이셔널 디자인을 어떻게 공부할까? - link
! 그 많은 것 언제 다 하나 2: 학습전략 - link
! 컴퓨테이셔널 디자인 수업 방식: 스튜디오 형식 VS 강의 형식 - link
24 컴퓨테이셔널 디자인 테크트리 - link
24.1 더 높은 수준의 컴퓨테이셔널 디자인 학습 스텝 - link
24.2 컴퓨테이셔널 디자인 스페셜리스트 Computational Design Specialist - link
24.3 디자인 엔지니어링 Design Engineering - link
24.4 소프트웨어 엔지니어링 Software Engineering - link
24.5 소프트웨어 엔지니어링 VS 소프트웨어 디벨롭먼트 - link
! 생각의 점유율과 Deep Thinking - link
! 컴퓨테이셔널 디자인 이론에 대한 단상 - link
25 데이터 - link
25.1 DIKW 피라미드 다이어그램 Data, Information, Knowledge, Wisdom - link
25.2 데이터로의 인식 Qualitative Data & Quantitative Data - link
25.3 데이터의 분류 - link
25.4 데이터로의 기록 & 가공 - link
25.5 전공지식과 경험 Domain Knowledge & Experiences - link
! 창작, 미적 영역도 데이터화가 가능할까? - link
CHAPTER 8 학습 자료 Study Materials & References - link
26 강의와 워크숍을 대하는 자세 - link
26.1 시작하는 단계 - link
26.2 중급 - link
26.3 고급 - link
27 강의 자료 - link
27.1 컴퓨테이셔널 디자인 수업 Computational Design & Creative Coding - link
27.2 질의응답 시리즈 QnA - link
28 워크숍 참조 자료 Workshop Materials - link
28.1 디자이너를 위한 파이썬 워크숍 Python for Design Scripting - link
28.2 디자이너를 위한 C# 디자인 스크립팅 C# for Design Scripting - link
28.3 유니티를 디자인 스크립팅 & 시각화 Unity for Design Script & Viz - link
28.4 웹 환경에서의 디자인 스크립팅 Design Scripting on Web - link
28.5 디자인 데이터 Design Data - link
28.6 디자인을 위한 인공지능, 머신 러닝, 데이터 AI, ML, Data for Design - link
28.7 컴퓨테이셔널 디자인 워크숍 Computational Design Workshop - link
28.8 CAD 디자인 소프트웨어 구축 Stand-alone CAD Software development - link
28.9 디자인 시각화 & 소프트웨어 활용 Design Visualization & CAD Software - link
28.10 디자인 시각화 Design Visualization - link
29 컴퓨테이셔널 디자인 프로젝트 예제 - link
29.1 디자인 & 컴퓨테이션 프로젝트 Design & Computational Project - link
29.2 컴퓨테이셔널 디자인 알고리즘 Computational Design Works, Work Snippet - link
29.3 연구, 기고 글 Research & Publication - link
29.4 하버드, MIT 연구 작업 Studies & Research & Lab - link
30 토크 & 토크 인터뷰 Talk & Interview - link
30.1 디자인 그리고 컴퓨테이션 Design and Computation - link
30.2 빔 그리고 벨류 엔지니어링 Bim & Value Engineering - link
31 참조 프로젝트 링크 - link
31.1 엔제이 프로젝트 시리즈 - link
31.2 KICDT 학회 Korean Institute of Computation, Design and Technology - link
31.3 엔제이의 컴퓨테이셔널 디자인 시리즈 - link
시간이 되는대로 글을 업데이트하도록 하겠습니다. 생각보다 시간이 많이 걸리네요. 양해 부탁드립니다.
많은 피드백 부탁드립니다!!
감사합니다.
Revision 8 / 2022/02 - 오디오북 링크
Revision 7 / 2022/01 - 2022 출판 버젼
Revision 6 / 2021/12
Revision 5 / 2021/09
Revision 4 / 2021/06
Revision 3 / 2021/04
Revision 2 / 2021/01
Revision 1 / 2020/05
이남주 / NJ Namju Lee / nj.namju@gmail.com
MDes;Harvard, MArch;UCB, B.S;SNUST, Research Fellow; MIT
Architecture design, Computation, Visualization specialist
Director and founder of NJ Design Lab / NJSLab / NJSLabSandbox
Facebook / Instagram / Linkedin
NaverBlog / DaumBrunch / Youtube(kr)
GitHub / CodePen / Medium / Youtube(eng)
