셸리 케이건 교수 ‘죽음을 말하다’

요즘 나의 키워드, ‘죽음’

 

셸리 케이건 교수 ‘죽음을 말하다’

누구나 피하고 싶지만 결코 누구도 피해갈 수 없는 것. 바로 ‘나는 언젠가 반드시 죽는다’는 사실이다. ‘죽음’이라는 주제의 강연이 미국의 예일대에선 17년간 최고의 강의로 꼽혔다. 셸리 케이건(Shelly Kagan)교수는 죽음을 진지하게 생각할 때 삶을 소중히 여길 수 있다 말한다. 그를 만나 어떤 삶이 가치 있는 삶인지 물었다.

“당신이 앞으로 3년만 살 수 있다면 무엇을 하며 살겠는가?” ‘죽음(DEATH)’을 주제로 예일대에서 17년 동안 강의를 하는 셸리 케이건 교수가 늘 청중에게 던지는 질문이다.

그의 강의는 하버드대 마이크 샐던 교수의 ‘정의(JUSTICE)란 무엇인가?’, 탈 벤-샤하르의 ‘행복(HAPPINESS)’과 함께 ‘아이비리그(Ivy League) 3대 명강의’로 꼽힌다. 그의 강의가 이토록 인기 있는 이유는 무엇일까?

아마도 그의 강의를 통해 어떻게 살아야 할 것인지에 대한 실마리를 찾고 싶기 때문일 것이다. 죽음과 삶에 대한 해답을 찾고 싶은 것은 비단 예일대 학생뿐만이 아니다. 그의 강의 내용을 담은 책 [죽음이란 무엇인가]는 국내에서도 15만 부 가까이 팔리며 베스트셀러가 되었다.

그런 그가 지난 5월 7일 한국을 찾아 서울대학교에서 공개 강연회를 열었다. “제 몸이 아주 게을러서 좀 앉겠습니다” 그의 말에 청중이 웃음을 터뜨렸다.

수염을 다듬지도 않았고 체크무늬 셔츠와 청바지에 운동화 차림이었다. 강의할 때 항상 교탁 위에 올라앉아 책상다리를 하고 강의한다고 해서 ‘책상 교수’라고도 부르는 그는 이날도 어김없이 책상 위에 앉아 강연을 시작했다.

 

 

1왜 죽음에 대해 생각해야만 하나?

“사람들은 죽음에 관한 생각을 애써 외면하려고 합니다. 죽음은 너무나 두렵고 불편하고 우울한 주제이기 때문이죠. 하지만 인간은 어차피 죽음을 맞이하기 때문에 ‘죽음’에 대해 제대로 인식할 필요가 있어요.

그래야만 어떻게 살 것인지, 무엇이 가치 있는 삶인지를 생각할 수 있으니까요. 스스로 진정한 가치를 찾은 뒤에 그것을 목표로 삶을 다듬어나가는 것이 의미 있는 인생입니다.

결국 제가 학생들이나 독자들에게 말하고 싶은 것도 그들의 인생이 앞으로 어떠해야 할지 생각하게끔 하려는 것입니다.” 그는 죽음 이후 영혼은 존재하지 않는다고 단언한다. 종교에서 말하듯 죽음 이후 사후 세계나 육체와 분리된 영혼이 없다는 것이 그의 생각이다.

인간의 삶은 죽으면 끝이라는 얘기다. 짧게 살다 떠나는 생을 위해 무엇을 해야 인생이 의미 있는 것이 될까, 끊임없이 생각해야 한다는 것.

 

 

그렇다면 어떤 삶이 가치 있는 삶일까? 주어진 시간에 어떻게 살아야 보람된 삶을 살 수 있을까? 어떤 이는 여행을 하겠다고 하고, 어떤 이는 가족 또는 친구들과 시간을 보내겠다고 말한다.

케이건 교수는 이에 대한 힌트를 자신이 겪은 경험을 통해 제시하고 있다. “몇 해 전 시한부 선고를 받은 한 학생이 제 강의를 들었습니다. 그 학생은 자신이 곧 죽을 것이라는 사실을 잘 알고 있었어요. 이미 1학년 때 암 선고를 받은 상태였고 담당 의사는 회복 가능성이 극히 희박하고 기껏해야 몇 년밖에 살지 못할 것이라고 얘기해주었답니다. 그때 그 학생은 스스로에게 이렇게 물었다고 하더군요. ‘남아있는 시간 동안 무엇을 해야 할까?’ 그러고는 자신이 정말로 원하는 것은 학교를 졸업하는 일이라고 결정을 내렸어요. 죽기 전에 학교를 졸업하는 것을 목표로 세운 것입니다. 그렇게 그 학생은 졸업반 2학기에 죽음에 관한 제 강의를 수강하게 되었습니다. 그런 상황에 처한 학생이 제 수업에 참석해 영혼과 죽음 이후의 삶이 있는지, 우리 모두 죽을 거라는 사실이 과연 나쁜 것인지에 관해 함께 이야기를 나누는 모습은 저를 숙연케 했어요. 그런데 학기 중 갑자기 상태가 악화됐고, 의사는 더 이상 학교를 다니지 말고 집으로 돌아가 마음의 준비를 하도록 당부했어요. 그렇게 그 학생은 집으로 돌아갔고, 이후 병세는 급속도로 악화됐습니다.저를 포함해 당시 그 학생이 수강한 강의를 담당하던 교수들이 모여 행정상의 절차를 놓고 고민에 빠졌습니다. 학점을 어떻게 줘야 할까? 당연히 그 점수에 따라 졸업 여부가 결정될 터였습니다. 다행히 그때까지 그 학생의 성적은 좋았고 결국 예일대는 그가 세상을 떠나기 전 학위를 수여하기로 결정하고 교무책임자를 그의 고향으로 내려 보냈지요. 학생은 학위를 받고 무척이나 기뻐했고, 얼마 후 세상을 떠났습니다. 감동적인 이야기 아닌가요? 시한부 선고를 받고서 과연 얼마나 많은 사람들이 공부를 선택할까요? 여러분은 어떤 선택을 할 것 같습니까? 이처럼 내게 주어진 시간이 얼마나 남았는지 알게 된다면, 정말로 원하는 일에 집중하며 삶을 더욱 가치 있게 살 수 있을 거예요. 죽음이 결코 나쁜 것만은 아닌 거죠. 반대로 영원한 삶이 항상 좋은 것은 아닙니다. 무한한 것에는 소중함을 느끼지 못 하기 때문이죠. 오히려 재앙이 될 수도 있어요.”

 

 

셸리 케이건 교수는 인간을 영혼 없는 경이로운 기계(machine)라고 말한다. “인간은 시를 쓰고 사랑도 하고 철학도 합니다. 사람의 몸은 그야말로 많은 일을 할 수 있는 경이로운 기계이지요.

하지만 우리 몸이 죽으면 결국 아무 경험도, 생각도 할 수 없게 됩니다. 그렇기에 몸의 죽음은 곧 내 존재의 죽음을 의미합니다.” 우리는 무한한 것에는 소중함을 느끼지 않는다. 우리 삶이 가치 있고 소중한 이유는 바로 이 죽음이 가지는 유한성 때문이라고 강조한다.

죽음에 대한 그의 생각은 인간은 누구나 죽음을 직면하고 살기 때문에 어디 하나 낭비하지 않아야 한다는 것이다. 어떻게 살면서 더욱 행복을 누릴 것인지를 늘 고민하라는 그의 애정 어린 충고다.

그는 암, 사고 등을 겪으며 죽음이란 절체절명의 순간을 경험한 사람들은 이런 얘기를 종종 한다고 말한다. ‘이제 새로운 인생을 살아보고 싶어요. 일찍 퇴근해서 가족과 많은 시간을 보낼 겁니다.

내가 정말로 좋아하는 일을 하면서, 미래에 대한 걱정과 돈 벌 궁리에서 벗어나고 싶습니다. 그리고 사랑하는 이들에게 사랑한다고 꼭 말할 거예요.’ 자신이 죽을 것이란 사실을 진심으로 받아들일 때, 인생의 우선순위를 바꾸고 비로소 생존경쟁의 쳇바퀴에서 벗어나고자 한다는 것.

그리고 사랑하는 사람들과 많은 시간을 보내고 자신에게 더 가치 있는 일을 하고자 한단다. “그런데 사람들은 경쟁에서 이기고 더 많은 돈을 벌기 위해 노력하는 반면, 정말로 소중하게 여기는 일에는 별로 시간을 투자하지 않습니다.

가족과 친구들이 얼마나 소중한 존재인지, 자신이 그들을 얼마나 사랑하는지 말하지 않죠. 즉, 자신이 죽는다는 사실을 잘 실감하지 못하기 때문에 이렇게 행동하는 것이지요.”

 

 

2어떤 삶이 의미있고 행복한 삶일까?

“내게 주어진 시간이 얼마나 남았는지 알게 된다면, 정말로 원하는 일에 집중하며 삶을 더욱 가치 있게 살 수 있을 겁니다. 죽음이 결코 나쁜 것만은 아닌 거죠. 영원한 삶이 항상 좋은 것은 아닙니다. 무한한 것에는 소중함을 느끼지 못하기 때문이죠.”

그렇다면 어떻게 살아야 행복한 삶을 살 수 있을까? 그는 각자 자신이 좋아하는 것이 무엇인지를 먼저 적어보라고 권한다. 어떤 사람은 그게 여름날의 시원한 아이스크림일 수 있고, 또 어떤 사람은 하루 종일 볼 수 있는 최신형 TV를 적기도 할 것이다.

일반적으로는 돈, 좋은 직장 같은 것을 꼽기도 한다. “좋은 직장을 얻으려면 좋은 교육을 받아야 한다는 얘기를 들은 적이 있습니다. 교육은 좋은 직장을 얻는 수단으로서 좋습니다.

좋은 직장은 왜 좋을까요? 돈을 벌 수 있는 수단이기 때문에 좋은 거겠죠. 그러면 돈은 왜 좋은 건가요? 내가 좋아하는 아이스크림을 먹을 수 있게 하기 때문 아닐까요? 아이스크림은 당신한테 무엇을 주죠? 바로 기쁨(pleasure)이죠.”

그는 교육과 좋은 직장, 돈, 아이스크림 같은 것은 결국 기쁨을 누리기 위한 도구일 뿐이라고 말한다. 내가 정말 얻고 싶은 것은 좋은 직장이나 돈과 같은 것이 아니라 단지 기쁨일 뿐이라는 얘기다.

좋은 직장이나 돈은 기쁨을 얻기 위한 수단일 뿐, 그 자체가 삶의 목표는 될 수 없다. 그는 이해를 돕기 위해 한 가지 예를 더 들었다.

“경험 기계가 있다고 생각해봅시다. 이 기계 안에 들어가면, 당신이 원하는 것이 무엇이든 경험할 수 있게 해줍니다. 실제 그 일을 겪었을 때와 정확히 똑같은 느낌과 감정을 가질 수 있게 해주죠. 원한다면 에베레스트 산 정상에 올라서는 짜릿한 경험을 하게 해줄 수도 있습니다. 이런 기계가 있다면 당신은 아주 좋은 것만 경험할 수 있을 겁니다. 혹자들이 말하는 그야말로 ‘완벽한 삶’을 살 수 있는 거죠. 하지만 이렇게 간접 경험을 했다고 행복할 수 있을까요? 뭔가 빠져 있다고 생각하지 않습니까?”

 

 

모든 좋은 경험을 할 수 있다면 나의 삶이 완벽해질 거라고 생각하는 이들에게 던지는 케이건 교수의 질문이다. 좋은 것만 경험한다고 해서 결코 행복한 인생이 아니라는 것. 많은 돈과 좋은 직장을 가지고, 고급 옷을 입고 비싼 차를 탄다고 해서 그것이 결코 완벽한 삶이 될 수 없다고 강조한다. “그럼 이제 또 물을 수 있죠. 무엇이 빠져 있는 것일까요? 그 질문에 대한 답이 당신이 생각하는 ‘잘 사는 것이 무엇인가’에 대한 답이 될 수 있을 겁니다.저요? 내게는 아이 세 명을 타인을 배려하는 아이들로 잘 키우는 것이 그 해답 중 하나가 될 수 있겠죠.”

강의 말미에 한 청중이 물었다. 그렇다면 삶의 궁극적인 목적은 무엇이 될 수 있느냐고. “삶의 궁극적인 목적은 세 가지로 정리할 수 있습니다. 첫째는 자기 스스로가 자신을 잘 돌보는 겁니다. 스스로를 행복하게 만들기 위해 노력하는 것이죠. 두 번째는 풍부하고 값진 경험으로 내 삶의 그릇을 많이 채우는 것입니다. 마지막으로 가장 중요한 것은 나 혼자만 생각하는 것이 아니라, 다른 이들의 삶을 윤택하게 하는 일입니다. 많은 이들에게 이 세상이 힘들고 슬픈 곳일 겁니다. 그래서 살아 있는 우리가 할 수 있는 건 이 힘든 세상 을 좀 더 좋은 곳으로 만드는 것이 아닐까요?” 케이건 교수는 마지막으로 덧붙였다. “우리는 모두 죽습니다. 그래서 잘 살아야 합니다. 죽음을 제대로 인식한다면 인생을 어떻게 살아야 하는지에 대한 행복한 고민을 할 수 있습니다. 부디 삶과 죽음에 관한 다양한 사실에 대 해 스스로 생각해보기 바랍니다. 나아가 두려움과 환상에서 벗어나 죽음과 직접 대면하기를 바랍니다. 그것이 또다시 인생을 사는 것입니다.”

취재

 

정희순 기자
사진

 

안호성
참고자료

 

[죽음이란 무엇인가](엘도라도)
제공

 

우먼센스

 

발행

 

2013년 6월호

나희덕, 푸른 밤

너에게로 가지 않으려고 미친 듯 걸었던 
그 무수한 길도 
실은 네게로 향한 것이었다 

까마득한 밤길을 혼자 걸어갈 때에도 
내 응시에 날아간 별은 
네 머리 위에서 반짝였을 것이고 
내 한숨과 입김에 꽃들은 
네게로 몸을 기울여 흔들렸을 것이다 

사랑에서 치욕으로, 
다시 치욕에서 사랑으로, 
하루에도 몇 번씩 네게로 드리웠던 두레박 

그러나 매양 퍼 올린 것은 
수만 갈래의 길이었을 따름이다 
은하수의 한 별이 또 하나의 별을 찾아가는 
그 수만의 길을 나는 걷고 있는 것이다 

나의 생애는 
모든 지름길을 돌아서 
네게로 난 단 하나의 에움길이었다

웹접근성(by ClearBoth 벙개!)

브라우저
  • Engine
    • 해석해주는거.
    • IE는 Gecko, Chrome은 webkit쓰다가 blink로… 사파리는 웹킷,
    • 주의해야할것 : Blink
      • webkit접두사가 다 먹힌다.
      • but webkit이랑 blink는 다르다!
    • 엔진의 성능이 좋을수록 브라우저 속도가 빠르다
      • 최적화 최적화!!
      • 어떻게 돌려야 이 엔진에서 가장 잘 돌아가는지!
  • Mobile Browser
    • Android 내장 브라우저
      • 기본적으론(4.3이하) webkit
      • 4.4(키캣)부터 blink
    • Android 크롬(2주에한번씩 업뎃)
      • blink
    • iOS (4주에한번씩 업뎃 – 심사가 빡세서…)
      • 사파리 : 웹킷
    • Blackberry
      • webkit
    • Symbian
      • 엔진 미상(!!!!) (IE랑 비슷)
  • Browser
    • minimun브라우저에 돌아가게 만들긔
      • IE 5.5를 지원하는걸 만드느라 엄청 밤새고 그랬는데 5.5접속률은 0%이었다…
  • 주절주절
    • 크롬은 업데이트가 언제 됬는지도 모르게 지들 멋대로 막 업뎃함.
      • IE는 윈도우즈를 통째로 업뎃할때 얘도 업뎃함 ㄷㄷㄷ
    • 포털은 minimum까지 다 지원해야함.
      • 작은 퍼센트의 고객을 잃는것도 큰 타격이므로 ㄷㄷ
기술
  • Front-End
    • 보여지는쪽. 브라우저 성향을 탄다.
    • 내가 조금이라도 건드리면, 사용성에 영향을 준다.
    • HTML
      • 마크업.
      • made by 팀 버너스 리
      • Hyper text markup language
      • 가장 기본이고, 가장 중요하다. HTML을 얼마나 잘짜느냐가 그사람의 역량이(!!)(구글 검색결과에 상위에 노출된다던가, 접근성에 적합한가..)
      • HTML5. 새로운 기술들 많음. 책을 읽는다면 최신걸로 읽는게 좋음!
        • 비교적 최신 프로젝트들은 요걸 씀.
      • XHTML, HTML4.01    <<더이상 바뀌지 않는다!
      • W3C, WHATWG 에서 명세 참고해 (하지만 웟WG는 아메리칸조크들도 섞여있어서 걍 W3C봐)
    • CSS
      • Cascading style sheet
      • 의미와 표현의 분리.
        • 브라우저를 이쁘게 만들기 위해 HTML을 더럽히지 말쟈…
      • CSS3 : Transition, animation, flex box….
    • JS
      • 동작을 담당.
      • ECMAScript : 자바스크립트의 최신버전(명시되어있는거!)
        • Action script
  • Back-End
    • 데이터. 브라우저 성향을 타지 않는다.
    • Client
      • php, JSP, ASP
    • Server
Mobile
  • 파편화 장난아니다!
  • 아이폰
    • 3.5 inch(~4s)
    • 4 inch (5s, 5c)
  • 레티나 대응(공식명칭 : DPI-DotPerInch-대응)
    • “걍 이미지를 2배로 쓰는거 아니야?”라고 사람들이 착각함.
    • 근데 또 너무 좋은 화질로 놓으면 사용자의 데이터를 쭉쭉 빨아먹는다.
    • 실제 디바이스 사이즈에 비해 해상도가 미친듯이 큰거…
    • 이제 PC에서도 레티나대응을 해야한다(맥프레!)
  • 안드로이드
    • 해상도 파편화 대박
  • 디바이스 보는 방식
    • Portrait : 세워서보기
    • Landscape : 눕혀서보기
  • 그래도 모바일이 CSS3를 웹보다 더 잘 지원한다.
  • Mobile First(모바일 우선대응)
    • 개발하기 편한듯. 폰트도 다 깔려있고, 화면전환, GPS, 확대축소, 전화, 문자, 진동, Touch 등등 다 구현(?!)되어있으니.
    • 데스크탑은 불가하고, 모바일은 가능한것들이 많음! (사용성 big)
      • 예를들어, 피트니스나, 요리 등등.
      • 휴대가 가능하다는게 제일 큼.
  • Responsive Web design
    • 여러 해상도에서 다른 사용성을 같은 마크업으로…(ㄷㄷ)
    • mobile first랑 일맥상통.
주절주절
  • megaman sprite(롱맨?) 한번 만들어보면 JS dom같은거 한방에 이해한다.

아이디어 생각 안하기

출처: http://sangminpark.wordpress.com/2013/12/08/아이디어-생각-안하기/

아이디어 생각 안하기

Posted on 12월 8, 2013

들어가며

난 어려서부터 코딩한 그런 창조적 아이는 아니었다. 그저 98년 당시 가장 쿨했던 전공 컴퓨터공학(지금은 상상 안가겠지만..) 에 발 담궈봤을 뿐이다. 처음 1년간은 C 프로그래밍이 너무 어려워 학점이 계속 “씨 씨” 욕을 해댔다. 1년정도 지났을때 좀 색다른 경험이 있었다. 교회의 젊은 전도사님이 어느날엔가 잡지책을 한권 펴 놓고 끙끙대고 있는걸 봤다. 무엇을 하시느냐 묻자 잡지사의 상금이  걸린 퍼즐 문제를 푼다고 했다. 그분은 사실 좀 많이 가난했었는데 거기에 진심으로 희망을 걸고 계신 듯 했다. 그런데 문제들중 딱 한가지만 모르겠다고 울상이었다.  퍼즐은 숫자가 나열되어 있고 중간 중간에 비어있는 연산부호를 넣어 결과 숫자를 만들어내는 문제였다. ‘안 어려워 보이는데?’ 생각했지만 한참 끙끙대도 조합이 안 나왔다. 가능한 연산자의 조합이 수도 없이 많으니 당연했다. 그러다가 언뜻 머릿속을 스친 생각이 ‘가만..코드로 짜면 그 많은 조합을 컴퓨터가 할 수 있잖아?’. 막상 코딩하는데는 몇분 안 걸렸고 프로그램은 곧바로 답을 찾아냈다. 이 모습을 곁에서 지켜보던 전도사님은 눈이 휘둥그레져, 과장하자면 마치 홍해가 갈라지는 것을 목격한 사람처럼 흥분했다. 그 주 내내 만나는 사람마다 “저사람 천재”라고, 심지어는 설교중에도 토해내던 흥분이 다음 호 잡지의 당첨자 목록에 본인 이름이 없는걸 확인한 후에야 멈췄다.

두뇌의 조작질

작은 에피소드를 아직 기억하는 이유는 내 코드가 어떤 사람의 중요한 문제를 해결한 첫 경험이기 때문이다. 그전에 학교에서 해오던 숙제, 프로젝트는 매년 반복되는 이미 정답이 정해진 훈련이었다면 그날의 코딩은 일상에서 맞닥뜨리는 살아있는 문제를 해결한 것이다. 요즘 종종 블로그를 읽고 일개 프로그래머인 내게 스타트업 아이디어를 상담해오는 분들이 있다. 대부분 재미있고 신선하다. 그런데 거의 모든 경우 슬라이드를 다 읽고 난 후에도 그 아이디어가 어떤 문제를 해결하는지 알수가 없다. 많은 경우 본인의 아이디어가 “새롭다” 또는 “지금껏 없었다”라고 이야기 한다. 그말이 맞다. 새롭다. 하지만 새로운 아이디어는 무한대로 만들어낼수 있다. 트위터에 한글자 더 추가해 141 글자를 가능케 하는 것도 아이디어고, 139자로 제한하는 것도 아이디어다. 다만 아무도 원하지 않을 뿐.

폴 그레이엄이 “스타트업 아이디어”에서 지적했듯 아이디어에서 시작하는 것은 너무도 위험하다 [1]. 무한한 아이디어의 바다에는 반짝이는 돌들이 너무 많아서 우연히 예쁜 돌맹이 하나를 집어들고 진주라고 믿는 경우가 많다. 스타트업을 꿈꾸는 나는 종종 아침에 샤워하다가 혹은 밤늦게 뜨거운 욕조에 누워 생각하다가 깜짝 놀랄 쿨한 아이디어가 생각나곤 한다. 흥분된 마음에 검색을 해보고 아직 아무도 시도하지 않았다는 걸 알땐 가슴이 벌렁벌렁 한다. 우뇌는 어떻게 구현할까 생각하고, 좌뇌는 벌써 빌게이츠집에 놀러가 있다. 생각의 그 다음단계는 쿨한 아이디어가 해결하는 문제를 “창조”하는 것이다. 사람들은 이러 이러한 문제를 겪고 있는데 내 아이디어가 그들의 문제를 해결해 줄 것이라 가정한다. 생각이 더 깊어지면 창조해낸 그 문제가 내게 그동안 고통이었다고 믿기 시작한다. 문제가 주는 고통이 심하다고 믿으니 아이디어는 더 빛나 보인다. 이 스타트업은 대박이다!

gollum

하지만 냉정하게 돌아보면 결국 두뇌의 장난질이다. 아이디어를 떠올리기 전까지는 사실 그 문제가 쓰라려본 적이 없다. 아이디어를 정당화 시키기 위해 두뇌가 한 조작질에 또 한번 당했을 뿐이다. 아이디어를 갖고 싶어한 그 순간부터 내 두뇌는 내 편이 아니다.

문제부터 생각할때

성공한 스타트업은 모두 문제에서 시작한다. 트위터의 창업자지만 세력 다툼에서 밀린 잭 도시(Jack Dorsey)는 Square라는 모바일 페이먼트(Payment) 스타트업을 다시 시작해 현재 적어도 3조원 이상의 가치를 평가 받는다. 잭 도시는 물건을 살 때마다 이런 질문을 했다. “왜 지금 내가 지갑에 손을 가져가 신용카드를 꺼내야 하지?” “왜 카드가 승인나서 영수증이 나올때까지 어색하게 서서 기다려야 하지?” “왜 또 나는 영수증에 사인해서 다시 돌려주고, 카드를 넣은 지갑을 다시 주머니에 집어 넣어야 하지?” [2] 보통 사람들은 당연하다고 생각한 결제의 과정이 잭 도시의 일상에서는 괴로움이었다. 아마도 리누스 토발즈가 본인을 ‘게으름뱅이’라고 지칭한 이유와 같을 것이다. 대부분 사람들에겐 익숙한 삶의 방식이 창업자들에겐 너무 귀찮고 불 필요해서 코딩으로 해결해야하는 문제로 보인 것이다.

사실 잭 도시, 리누스 토발즈 같은 “난 놈” 들에게만 그런 문제가 보이는 것은 아니다. 때론 누구나 알고 있는 문제를 다른 이유로 해결하지 못하는 경우가 많다. 이번주 미국에서는 홈조이라는 집 청소 스타트업이 약 400억 이상의 펀드를 받았다 [3]. 창업 1년만에 꽤 많은 매출을 올리는 알짜배기 스타트업으로 알려져 이곳 기준으로도 큰 펀드를 받아낸 것이다. 홈조이는 깔끔한 웹 페이지에서 집 청소를 요청하면 미국의 대도시에 있는 청소 업체들을 연결해 청소부를 파송한다. 스스로 청소부를 고용할 필요도 없고 홈페이지 하나 예쁘게 만든다니 마치 대동강 물 팔아먹은 봉이 김선달마냥 기발해 보인다. 그런데 꼭 그런 것일까? 아래는 홈조이의 창업자 Adora Cheung의 트윗에서 발췌한 것이다. 청소부들과 함께 추수감사 식사후 찍은 사진이다.

피부색도 사회적 클래스도 완전히 다른 청소부 사회에 들어가 그 업체들과 네트웍을 만들만한 용기, 적극성을 가진 프로그래머가 얼마나 될까? 실제 Adora Cheung은 인터뷰에서 본인이 청소부로 일했던 경험이 중요했다고 얘기했다. “집청소” 혹은 “청소부 고용” 이라는 문제는 아마도 몇천년의 역사를 가진 누구나 아는 문제인데 그걸 인터넷으로 가지고 온 것은 홈조이가 처음이다. 때론 문제를 알지만 해결할 용기가 없을 뿐이다. 비슷한 다른 예로 Stripe라는 페이먼트 스타트업이 있다 [4]. 수없이 많은 프로그래머들이 자신의 프로그램을 온라인에서 돈 받고 파는 그 과정을 고통스러워했다. 하지만 누구도 해결하려 들지 않았다. 코딩은 자신 있지만, 금융회사를 상대하는건 상상도 못할 일이기 때문에. 그걸 처음 시도해 의외로 쉽게 문제를 해결하고 페이먼트 서비스를 만든것이 Stripe 이다. 모든 프로그래머가 고통을 느꼈지만 금융회사의 문을 한번 두드려볼 용기는 없었다.

그래서 어쩌라고?

아이디어라는 단어를 떠올리는 순간부터 두뇌는 스스로를 속이기 시작한다. 그대신 우리 주변에 있는 문제를 발견하면서 스타트업은 시작된다. 때로는 홈조이, Stripe의 예처럼 스스로 단정지은 영역을 넘지 못해 알면서도 문제를 해결하지 못하는 경우가 있다. 그러나 더 많은 경우는 사실 우리가 문제를 발견할만한 자격을 갖추지 못했기 때문이다. 언젠가 이런 표현을 본 적이 있다. “Founders attract the problem (창업자는 문제들을 매혹시킨다)”. 문제가 매력적이어야 하는게 아니다. 우리 주변에 숨어서 존재하는 문제들중 하나가 당신에게 다가가고 싶을만큼 당신이 매력적이어야 한다는 뜻이다. 이런 표현도 좋다. “Problems want to be discovered (문제는 자신을 드러내고 싶어한다)”. 준비된 사람에게 보일 뿐이다. Ev Williams는 Blogger, Twitter에 이어서 최근엔 Medium 이라는 세번째 스타트업을 창업해 성공 신화를 이어가고 있다. 꾸준히 한 우물만 파다보니, “웹에서 글쓰기” 라는 주제에서는 대박 문제들이 그에게만 자신을 드러내는 것이다.

스타트업을 꿈꾼다면 그래서 보이지 않는 문제들에게 매력적인 사람이 되어야 한다. 방법은 의외로 간단하다. 첫째, 무언가를 정말 좋아해야 하고, 둘째는 작은 문제부터 해결해봐야 한다.  Ev Williams가 글쓰고 읽는 것을 좋아하지 않는다면 2조원 넘는 재산이 있으면서도 medium.com을 창업할 이유가 없다. 잭 도시는 아주 어려서부터 트위터를 상상하고 있었다 [5]. 두 사람 다 문제에 빠져 사는 것이다. 페이스북의 마크 쥬커버그는 어려서부터 아버지의 치과 사무실과 자신의 집을 연결하는 작은 문제를 메신져를 코딩해 해결했다. 페이스북의 전신 Facemesh는 내성적이라 여친을 사귈 수 없었던 쥬커버그가 여학생들 사진을 스토킹하며 문제를 해결한 방식이었다. 사소한 문제를 해결하다보니 소셜 네트웍이라는 대박 문제를 얻은 것이다.

그래서 아이디어 생각은 멈추고, 좋아하는 것(직업일수도 있고 취미 일수도 있는)을 계속 하자. 그 과정에서 나를 괴롭히는 어떤 문제가 있는지 세심하게 관찰하자. 혹 문제가 대박처럼 보이지 않을지라도 내게 중요하다면 코딩으로 해결해보자. 그러다보면 언젠가 대박 문제가 당신에게 노크할지도 모른다.

loveactually

C-School #2 Connection: 사람-아이디어의 의미있는 연결, Trend

<일상속의 디지털 테마파크, 신기헌(프리랜서)>

  • 신기헌
    • Architecture + design + new media + UX + marketing + education + social innovation
    • 테마파크 : 내가 다뤄온 이 주제들이 다 긴밀하게 엮여나온다.
  • 테마파크
    • 우리가 생각하는 테마파크는?
      • 일상과 분리되는 일탈의 공간, 고정된 경계로의 입장, 비용을 지불하는 특별한 이벤트.
    • 테마파크를 구성하는 다양한 어트랙션
      • 구성요소(공간, 체험, 제품, 서비스…), 경험요소(탑승, 대기, 관람, 참여, 구매, 휴식, 이동)
    • 일상속의 일들이 테마파크가 될 수 있다!!
  • 일탈의 재발견
    • 일탈<->일상.
    • 일상 속 일탈은?
      • 넘쳐나는 일탈들…(일상과 같은 일탈)
      • 넘쳐나는 가상속의…(더 현실같은 가상)
      • 넘쳐나는 디지털속의…(새로운 모습의 아날로그)
    • 그럼 일탈 속 일상은?
      • 구글이 만든 증강현실게임. google Ingress.
      • 롤러코스터 앞에 자기가 고른 쉐이크 가루 설치. 롤러코스터 타고나면 잘 섞여있고, 시원하게 쫙 들이킨다. 음료에 대한 호감 굳굳
  • 새로운 가능성의 발견, 어떻게 가능한가?
    • 새로운 인터페이스. (Cocal-cola village- RFID&Facebook)
      • 이마트 세일 네비게이션(좁은 공간에서 네비 가능. 특수전구 빛 쏘는거 0,1,0,1 인식해서.) ㄷㄷ 신기하다. new 기술도 엄청 중요한듯. 머리를 잘굴리자 기술자를 찾자 아님 내가 개발하든지 헠헠헠
      • 디즈니 테마파크 LED머리띠 ->위치센서 인식해서 자기가 무대의 일부가 됨(색깔 등으로 빤짝빤짝). 디즈니랜드의 하나의 픽셀이 됨 ㄷㄷ
      • 디즈니랜드의 기념품 – 3D프린터로 자기 얼굴이랑 공주랑 붙여서 피규어 ㄷㄷ
    • 경험의 가치에 대한 재발견
      • 기차티켓에 특정시간+건축물 인쇄 ->기차 타고 가다가 그 시간에 창밖을 보면 그 건축물이 보임 ㄷㄷ
    • 기술은, 우리가 고민한 만큼 찾을 수 있다.
  • https://sites.google.com/site/heavenlydesigner/lecture/cschool
  • Inspiration…
    • 저렇게 많은 일들을 하면서, 뭐에 하나 전문가적인것이 없는게 약점이 되지 않는가?(지금 내가 경계하는 내 미래)
    • 오 동영상 보여주고 그 다음에 간략히 설명하며 스크린샷 썸네일로 보여주는거 괜찮다.
    • 현실공간을 파고드는 게임….

 

<3D프린터 상상을 제조하다, 강민혁(오픈크리에이터즈 대표)>

  • 왜 갑자기 이슈냐?
    • 오픈소스로 풀렸다!!!
  • REPRAP
    • 얘가 시초. 얘로 인해서 많고많은 3D프린터들이 나왔다.
  • 내가 CAD설계를 다 해야하느냐?
    • Nope…파일들이 인터넷에 많음. (ex. 아이폰케이스가 필요하다 하면 다운받으면 됨)
  • 3D프린터 자체가 전부는 아니다. 하지만 이걸로 뭘 만들 수 있을지, 그게 중요하다.

<오픈하드웨어와 Smart things 플랫폼, 최재규(매직에코 대표)>

  • IOT관련 솔루션 개발중.
  • IOT란?
    • 가상의 세계+현실
    • PC ->웹사이트 ->휴대폰
  • 왜 미국에서 자녀들 sw교육붐이 일어났느냐?
    • 지금 미국의 부자들이 SW로 성공한 사람들. 그들은 과연 자녀교육을 어떻게..??!
    • 그냥 고리타분한 컴퓨터교육이 아니고, 창의적인 것들(ex.아두이노)로 교육!
  • 아두이노
    • 확장성 짱짱맨
  • 없으면 내가 만들면 되지! 하는 마인드
    • 게다가 비용도 그렇게 많이 안들음.

 

 

Head First HTML 정리

웹언어

  • 웹서버가 하는일
    • 인터넷에서 웹브라우저의 요청을 기다리며 24시간 내내 쉬지않고 작동.
    • 웹페이지가 요청을 접수하면, 요청에 해당하는 리소스를 찾고 브라우저에 적절한 응답을 보낸다.

 

인용구

  • <q> 사느냐 죽느냐 문제다</q>
    • 인용구. 인용구의 스타일을 줄 수 있다. 웹 페이지가 의미 있고 구조적이게 된다.(시각장애인 위한 음성 HTML을 생각해봐)
    • 인라인 요소 – 시대의 흐름에 따라간다(q, a, em)
  • <blockquote>q랑은 달리 문단과는 별도로 스스로 보여질 필요가 있는 긴 인용구</blockquote>
    • 긴 인용구
    • 블록 요소 – 스스로 자립가능(h1, p, blockquote) 앞과 뒤에 라인브레이크를 가지고있다.

링크

  • <a href=”https://milooy.wordpress.com&#8221; title=”링크에 마우스 올리면 보이는 제목”>유림의 블로그</a>로 가봅시다.
  • id 속성으로 <a>요소에 대한 목적지 생성하기
    • 목적지를 찾고 id를 추가한다.
      • <h2 id=”chai”>차이티라떼</h2>
    • 연결하기
      • <a href=”index.html#chai>차이티라떼로</a>
  • 새 창에서 링크띄우기
    • <a target=”_blank” href=”http://dddd”>링크링크</a&gt;
    • 블랭크 말고 “coffee”라고 쓰면: 커피라는 타겟이름을 가진 모든 링크가 같은 창에서 열릴것이다. _blank는 브라우저에 항상 새 창을 사용하라는 특별한 경우.

 

이미지 다루기

  • <img src=”../images/green.jpg” alt=”>
    • 인라인 요소(앞 뒤로 라인브레이크 삽입 안함)
    • alt : 만약 이미지가 보이지 않으면 이 텍스트가 대신 사용됨

표준

CSS

  • font-family : sans-serif;
  • color : gray;
  • border-bottom : 1px solid black;
  • <link type=”text/css” rel=”stylesheet” href=”lounge.css”>
    • link : 외부정보와 링크로 연결.
    • type : 정보의 유형이 text/css. CSS스타일 시트라는 뜻.
    • href : 스타일시트가 위치해있는 곳.
  • font-size: 14px(혹은 %로도 표현가능), font-weight:bold, text-decoration: underline
  • line-height : 1.6em  //줄간격은 폰트의 1.6배
  • class: 한개이상의 요소에 스타일을 줄때 이용.
    • p.specials {} : special클래스에 있는 문단만 선택
    • .specials {} : special클래스에 있는 모든 요소 선택
  • id : 꾸미고자하는 스타일이 유일하고 페이지 내에서 오직 한개일때.
    • #footer {} : footer id를 가진 임의의 요소 선택
    • p#footer {} : 만약 <p>요소가 footer id를 가지고 있다면, <p>요소를 선택.
    • 한 페이지 내에서 오직 하나의 요소와 일치해야 함.
  • background-image : url(images/backgound.gif);
    • url은 페이지에 이미지를 넣기 위한게 아님. 이미지 넣으려면 <img>요소 사용.
    • 배경이미지는 그저 보여주는 용도일 뿐. 장식을 위한 것.
    • url주위에 따옴표 없음
  • background: white url(images/cocktail.gif) repeat-x;
    • 한줄에 쓸수도 있다.
  • border-style : 다양하게 많음
  • border-radius : 둥근모서리 지정.
  • text-align : 안에 있는 모든 인라인 콘텐츠가 정렬.
    • 오직 블록 요소에만 설정해야 함.
    • 인라인 요소에 직접적으로 사용하면 아무런 영향 없음(<img>요소처럼)

박스

  • 패딩 : 콘텐츠에 여유공간을 제공
  • 마진 : 요소와 다른 요소 사이에 여백 줌

홈짱 HTML 정리

Html의 기본구성

  • <!DOCTYPE html> : document type definition
  • <HTML>…</HTML> : HTML문서의 시작과 끝을 의미하는 태그.
  • <HEAD>…</HEAD> : HTML문서의 기본 정보를 담음. 문서의 제목, 제작자, 정보
  • <TITLE> : 문서 상단의 제목 설정. 웹브라우저의 제목 표시줄에 표시.
  • <META> : 문서의 정보 설정
  • <script> : javascript언어 등을 사용한 다양한 프로그램이 위치하는 공간
  • <style> : 문서의 장식

body태그

  • <body>와 </body> 사이에 본문이 위치
  • <body bgcolor = “gray”> : 본문의 배경색 회색
  • <body leftmargin = “100”> : 본문 왼쪽여백 100픽셀

 

 

 

레이아웃

    • 테이블을 이용한 레이아웃
      • 홈페이지 제작할때 가장 많이 사용되는 태그는 <table>태그. (<tr>, <td>와 함께)
      • 레이아웃을 잡을 때 <table>태그만큼 효율적인게 없기 때문
      • <caption>여기에 표 제목(캡션)을 적어준다</caption>
      • a21b5e8e5d65bc1d89797a7e0edc4c2a.png
      • d5f8594430b698ad3fef5f1d9e6bcee7.png
        • <th>여긴 테이블의 각 열에 대해 제목을 표시.의미도 더하고 표시도 더해줌</th>
  • <table width=”800″ cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center”>
    <tr bgcolor=”#8080FF” align=”center”>
    <td width=”100″>홈페이지 로고</td>
    <td width=”100″>메뉴1</td>
    <td width=”100″>메뉴2</td>
    <td width=”100″>메뉴3</td>
    <td width=”100″>메뉴4</td>
    <td width=”100″>메뉴5</td>
    <td width=”200″><!– 여백 –></td>
    </tr>
    <tr height=”5″>
    <td colspan=”7″><!– 여백 –></td>
    </tr>
    </table>
    <table width=”800″ cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center”>
    <tr>
    <td width=”150″ valign=”top” bgcolor=”#8080FF”>
    <table width=”130″ cellpadding=”5″ cellspacing=”0″ border=”0″ align=”center”>
    <tr>
    <td>하위메뉴1</td>
    </tr>
    <tr>
    <td>하위메뉴2</td>
    </tr>
    <tr>
    <td>하위메뉴3</td>
    </tr>
    <tr>
    <td>하위메뉴4</td>
    </tr>
    <tr>
    <td>하위메뉴5</td>
    </tr>
    </table>
    </td>
    <td width=”650″ valign=”top”>
    <table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center”>
    <tr>
    <td>여기에 본문이 옵니다.</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
      • 다소 복잡한 테이블이지만 실제로 만들어 보면 크게 어렵지 않습니다.
  • 홈페이지 로고
  • 메뉴1
  • 메뉴2
  • 메뉴3
  • 메뉴4
  • 메뉴5
  • 하위메뉴1
  • 하위메뉴2
  • 하위메뉴3
  • 하위메뉴4
  • 하위메뉴5
  • 여기에 본문이 옵니다.
    • 너비의 단위는 %를 사용하였지만 100% 레이아웃을 차지하는 홈페이지가 아닌 이상 % 보다는 픽셀을 사용하는 것이 보다 일반적입니다.
      그리고 테이블의 셀안에 다시 테이블이 들어가는 것을 볼 수 있습니다.
      테이블을 이렇게 중첩시켜 나가면서 복잡한 레이아웃을 구현합니다.
      예제에서는 이미지를 전혀 쓰지 않았지만 대부분의 홈페이지 작업은 전체적인 화면의 이미지를 먼저 만들고 이 이미지를 잘라서 테이블을 이용하여 배치를 하는 방식으로 진행됩니다.

메타 태그

  • HTML문서가 어떤 내용을 담고있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담음.
  • 문서의 헤더부분에 위치해야함.
  • 속성
    • <meta name=”subject” content=”메타태그강좌”>
    • <meta name=”title” content=”메타태그”>
    • <meta name=”author” content=”homejjang”>
    • <meta name=”keywords” content=”메타태그,HTML”>
  • 검색엔진에게 문서의 내용 요약. 검색엔진이 메타태그를 수집하여 참고는 함.
  • 홈페이지의 주소가 바뀌었을때
    • <meta http-equiv=”refresh” content=”5;url=http://www.homejjang.com/”>
    • 5초뒤에 url속성값으로 지정한 페이지로 이동한다는 의미. http-equiv속성값을 지정된것과 같이 refresh한다는 의미
    • 즉 위와 같은 메타태그가 입력된 페이지는 읽지 않은걸로 인식하겠다는 의미
  • 한글로 작성된 홈페이지라는 걸 웹브라우저에게 알리기
    • <meta http=equiv=”content-type” content=”text/html; charset=euc-kr”>

이미지맵

  • 하나의 이미지에 여러개의 링크를 걸때 사용.
  • HTML소스가 간단해지는 장점
  • 만들기
    • <img src=”haha.gif” usemap=”#001″>    //usemap속성을 사용하여 이미지맵의 이름 지정
    • <map name=”001″>    //map태그를 사용하여 이미지맵 만들기
    •     <area shape=”rect” coords=”42, 41, 154, 66″ href=”/01/hahaha.php” target=”_blank”>
      • area : 하이퍼링크의 영역 지정.
      • shape : 이미지맵의 형태 지정. rect, circle, poly등 속성값
      • coords : 좌표값 지정. 까다로우니 텍스트 에디터에서 직접 코딩 않고 다른 유틸리티 사용.

아이프레임(iframe) Inline Frames

  • 내부 프레임. 하나의 HTML문서 내에서 다른 HTML문서를 보여주고자할때 사용
  • 그냥 프레임과 차이점 : frameset태그 내에 사용하지 않아도 됨. 독림적으로 <img>태그 사용하듯 문서내에서 원하는 위치에 삽입가능.
  • <iframe src=”http://www.homejjang.com&#8221; width=”600″ height=”300″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”yes”>
    • 프레임이랑 같다.

입력양식(form)

  • 홈페이지에서 사용자에게 정보를 받을때 사용.
  • 입력양식(form)의 구성
    • 입력양식의 범위를 지정할 뿐 화면상에는 아무런 내용 표시 ㄴㄴ
    • <form>과 </form> 사용자가 실제적으로 값을 넣을 수 있는 텍스트박스나 체크박스 등이 위치.
  • 속성
    • <form method=”get” action=”member_confrim.php”>
    • method : 웹서버와의 통신방법 지정. post. get
    • action : 입력양식에 입력된 값을 받아 DB에 저장하는 페이지 지정. php나 asp같은 웹스크립트 언어를 이용하여 제작
  • 텍스트필드
    • <input type=”text” name=”member_name”>
    • type : 폼 필드의 종류를 지정.
    • name : 폼 필드의 이름 지정. 하나의 폼 안에서 name속성의 값은 고유한 값이어야함. 폼이 전송된 후 폼을 처리하는 파일에서 각 폼 필드를 구분하기 때문
    • type과 name속성은 텍스트필드뿐 아니라 모든 폼 필드에 공통적으로 사용되는 속성.
    • size : 텍스트 필드 크기지정. 안쓰면 기본값은 20
    • maxlength : 텍스트필드에 입력가능한 글자수의 최대값.
    • value : 텍스트필드에 입력되는 기본값 지정가능.
  • 패스워드 필드
    • <input type=”password” name=”pass”>
    • ***로 표시된다.
  • 텍스트에어리어(textarea)
    • 텍스트필드는 한줄입력인데 반해 이건 여러줄.
    • <textarea rows=”5″ cols=”30″ name=”contents”>기본값은 여기에 적어준다.</textarea>
  • 셀렉트박스(콤보박스, pull-down menus)
    • <select name=”job”>
    •     <option value=””>직업선택</option>
    •     <option value=”학생” selected=”selected”>학생</opion>
    •     <option value=”회사원”>회사원</opion>
    •     <optgroup label=”sports”>
    •         <option value=”축구”>축구</opion>
    •         <option value=”야구”>야구</opion>
    •     </optgroup>
    •     <option value=”기타”>기타</opion>
    • </select>
    • 여기서의  value는 텍스트필드에서의 value랑은 다름. 옵션이 선택된 경우 전송되는 값 지정.
    • selected : 기본값으로 “학생”이 선택된채로 출력
    • optgroup : 옵션에 카테고리 만들 수 있음
  • 체크박스
    • 셀렉트박스랑 라디오버튼이 하나만 선택가능한 반면 체크박스는 여러개 선택.
    • <input type=”checkbox” name=”chk_info” value=”HTML”>HTML
    • <input type=”checkbox” name=”chk_info” value=”CSS” checked=”checked”>CSS
    • <input type=”checkbox” name=”chk_info” value=”웹디자인”>웹디자인ㄴ
    • value : 선택시 전송해주는 값 지정
    • checked : 기본으로 선택된채로 출력
    • name속성들이 같다->HTML, CSS선택하면 chk_info필드의 값은 “HTML, CSS”이런식으로 들어감
  • 라디오박스
    • 체크박스랑 비슷하나 하나만 선택
    • <input type=”radio” name=”chk_info” value=”HTML”>HTML
  • 리셋버튼
    • <form name=”input” method=”post” action=””>
    •     <input type=”text” name=”memberName”>
    •     <input type=”reset” value=”초기화”>
    • </form>
  • 전송버튼
    • <form name=”input” method=”post” action=””>      //액션 속성 지정해야함
    •     <input type=”text” name=”memberName”>
    •     <input type=”submit” value=”전송”>
    • </form>
  • 이미지 버튼
    • 전송버튼의 역할을 하면서 이미지로 출력되는 버튼
    • <input type=”image” src=”submit.gif”>
  • 파일
    • 게시판 등에 첨부파일을 업로드하는 경우 찾아보기 버튼을 사용
    • <form method=”post” action=”” enctype=”multipart/form-data” name=””>
    •     <input type=”file” name=”fileName”>
    • </form>
  • 히든 필드
    • 사용자가 입력하거나 선택하는 정보는 아니지만 폼 전송이 같이 전송해줘야 하는 정보
    • 예) 회원가입시 사용자의 아이피를 받는 경우
    • <input type=”hidden” name=”UserIP” value=”<?echo $$REMOTE_ADDR?>”>
    • <?echo $$REMOTE_ADDR?> : PHP코드의 일종. 사용자의 아이피를 인식하는 코드
  • label
    • 사용자가 인풋박스, 체크박스, 라디오버튼 등을 더 쉽게 누를수있도록.
    • 라벨부분 클릭해도 선택됨
    • label의 for속성의 이름과 폼요소의 id값을 같게하면 됨
    • <label for=”html”>HTML</label><input name=”checkboxinfo” type=”checkbox” id=”html”>

배경음악

  • 속성
    • autostart=”true/false” : false면 플레이버튼 눌러야 음악재생
    • hidden=”true/false” : 미디어플레이어가 화면에 표시되느냐?
    • loop = “true/false” : 음악의 반복여부
    • width=”20″ height=”30″ : 미디어플레이어 크기조절. 동영상파일일땐 적절히 조절 필요.
    • Showcontrols=”value” : 미디어플레이어, value값은 0, 1
    • VOLUME=”수치값” : 플레이되는 음악소리크기 임의설정
    • hspace=”value” vspace=”value” : 수직/수평 여백값.
    • mute=1 : 음소거

필드셋

  • filedset element : 서로 연관성있는 컨트롤들을 하나로 묶을 수 있게 해줌
  • legent element : 제목을 붙이는 역할
  • <filedset>
  •      <legend><b>메일링 리스트</b></legend>
  •      <input type=”checkbox”>html
  •      <input type=”checkbox”>css
  •      <input type=”checkbox”>java
  • </fieldset>

마퀴

  • 스크롤 되는 영역을 지정.
  • <marquee direction=”right”>오른쪽 방향으로 흐르는 텍스트</marquee>
  • behavior : 컨텐츠가 어떻게 스크롤될건지를 지정
    • scroll : 기본값. 마퀴 영역의 경계에서부터 스크롤
    • slide: 스크롤과 거의 동일하지만 마퀴 영역의 경계에서 더이상 스크롤안되고 멈춤.
    • alternate : 왔다갔다
  • scrollamount =”10″: 한번 스크롤될때마다 얼만큼 되는지 지정. 기본값:1px
  • loop =”1″: 스크롤되는 횟수 지정. 기본값은 -1. 계속적으로 반복해서 스크롤된단 의미.
  • width=”300″ height=”100″ : 스크롤되는 영역 지정
  • 기타 : align, hspace, vspace, transparency등 속성

오브젝트

    • 문서 내에 플래시나 동영상같은 객체를 삽입하는데 사용.
    • embed엘리먼트는 자신의 컴에 해당 미디어파일을 실행할 수 있는 프로그램이 없다면 실행안됨. 그러나 object엘리먼트는 웹에서 객체를 로드해서 재생되므로 프로그램 없어도 실행가능.
  • 플래시 삽입
  • 슬라이더 삽입
  • 퀵타임 무비 삽입
  • 리얼 비디오 삽입
  • <body topmargin = “100”> : 본문 상단여백 100픽셀

주석

  • <!– 여기에 주석 내용이 옵니다. –>
  • 실무에서 많이 사용

줄바꾸기

  • html은 스페이스와 엔터를 여러번 사용하더라도 하나만 인식함.
  • <p>첫 번째 문단</p>
  • <p>두 번째 문단</p>     이렇게 하면 첫번째 문단과 두번째 문단 사이에 공백라인이 들어간다.
  • <br> : line break 태그. 강제 줄바꿈
    • 진유림<br>짱짱맨
    • <br>태그의 남용을 피하자->가능한 글의 한문단을 의미하는 <p>태그를 사용하고 넓게 출력 방지 위해 css사용
    • <p style=”width:400px;”>홈짱닷컴의 홈페이지 제작강좌는 초보자를 대상으로 합니다. 그러므로 가능한 쉬운 용어를 일관성 있게 사용할려고 노력하고 있습니다.</p>
  • <p align=”left”>왼쪽정렬. 디폴트값</p>
    • center, right, justify(양쪽정렬)

표제(Heading)

  • 볼드체로 적용되고, H1이 가장 중요한 의미 가짐(크기가 크다).
  • <h1>Heading1</h1>
  • <h2>Heading2</h2>

텍스트 관련 태그

  • 물리적 태그 : 텍스트가 화면에 출력되는 형식을 지정
  • 논리적 태그 : 화면에 출력되는 형식보다는 태그 자체가 가지는 의미
  • <font size=”5″>텍스트 크기</font>
  • <font color=”red”>텍스트 색상</font>
  • <font face = “돋움”>텍스트 글꼴</font>
  • <font size=”5″ color=”red”>같이 쓰기</font>
  • 특수문자

링크

  • <a href=”http://naver.com>네이버</a&gt;
  • <a href = “http://naver.com&#8221; target=”blank”>네이버 새창에서 열기</a>
    • target속성 : 링크가 걸린 페이지를 어떻게 열 것인가를 결정
  • <a href = “http://naver.com&#8221; target=”blank” title=”열어버리자”>네이버 홈페이지 열기</a> //커서 올리면 설명 뜸
    • title 속성 : 링크의 이름을 지정하는 속성
  • 내부링크(책갈피 기능)
    • 링크에 이름을 지정해 문서내에서 이름을 이용해 이동이 가능(페이지이동 X 스크롤통한 이동O)
    • <p><a href=”#bottom”>문서의 하단으로</a></p>
    • <p><a name=”bottom”>여기가 문서의 하단</a></p>

이미지

  • 이미지 삽입
    • <img src=”이미지경로” width=”100″ height=”200″>
  • 절대경로
    • 고유한 경로. http://포함된 경로. c:home/images/tree.gif도 절대경로
    • 이것보단 상대경로를 이용해 이미지 삽입이 더 좋다.
  • 상대경로
    • 이미지를 삽입할 HTML문서를 기준으로 경로를 인식
    • 이미지 파일이 HTML문서와 같은 폴더에 있는지, 상위폴더에 있는지, 하위폴더에 있는지를 따져보고 경로를 지정.
    • 상위폴더 이동 : ../
  • 이미지 정렬(align)
    • <p><img src=”t.jpg” align=”top”>글씨는 이미지 옆 위에 나온다</p>
      • top, middle, bottom. 이미지와 텍스트의 배치
    • 이미지와 텍스트의 여백 조절
      • <p><img src=”t.jpg” align=”left” hspace=”5″ vspace=”5″>여백여백</p>
      • horizon space, vertical space의 약자.

  • 문서 전체 배경화면 회색
    • <body bgcolor=”gray”>
  • 글자색
    • <font color=”gray”>폰트색회색</font>

배경

  • 문서 전체에 배경적용. 패턴으로 깔림
    • <body background=”bg.jpg”>
  • 테이블
    • <table bgcolor=”gray”>
    • <tr>
    • <td>회색배경 가진 테이블</td>
    • </tr>
    • </table>

테이블

    • HTML에서 가장 많이 사용되는 태그
    • 종류
      • <table> : 테이블의 시작
      • <tr> : table row. 행을 정의
      • <td> : table data. 각 행에 셀을 정의. 즉 행에서 칸(열)을 나누는 기능.
    • 2행 2열 가진 테이블
      • <table border=”1″>
      • <tr>
      • <td>1*1 셀</td>
      • <td>1*2 셀</td>
      • </tr>
      • <tr>
      • <td>2*1셀</td>
      • <td>2*2셀</td>
      • </tr>
    • 각 열마다 동일한 행으로 이루어져야 한다.
  • 위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을 가지게 만들면 아래처럼 제대로 모양을 갖추어 지지 않습니다.
  • 1*1 셀
  • 2*1 셀
  • 2*2 셀
  • 첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다.
  • <table border=”1″>
  • <tr>
  •  <td colspan=”2″>1*1 셀</td>
  • </tr>
  • <tr>
  •  <td>2*1 셀</td>
  •  <td>2*2 셀</td>
  • </tr>
  • </table>
  • 위와 같이 colspan=”2″로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다.
  • 1*1 셀
  • 2*1 셀
  • 2*2 셀
  • 즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게 맞추어 주기 위해서 첫번째 row의 셀에서 colspan 속성을 사용하였습니다.
    열을 확장할때는 rowspan 이라는 속성을 사용합니다.
  • <table border=”1″>
  • <tr>
  •  <td rowspan=”2″>1*1 셀</td>
  •  <td>1*2 셀</td>
  • </tr>
  • <tr>
  •  <td>2*2 셀</td>
  • </tr>
  • </table>
  • 1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다.
  • 1*1 셀
  • 1*2 셀
  • 2*2 셀
  • 여기에서 중요한것은 확장을 하는 방향입니다.
    왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan,
    위에서 아래로 row를 확장하는 경우는 rowspan
    이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다.
    아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다.
      • 여백과 경계선
        • 경계선 두께
          • <table border=”3″>
        •  셀 여백 지정
          • <table cellpadding=”10″>
        • 셀과 셀 사이의 공간 지정
          • <table cellspacing=”5″>
      • 너비와 높이
        • 너비/높이
          • <table width=”200″ height=”100″>
          • 일반적으로 테이블의 높이는 잘 지정 ㄴㄴ
        • 테이블의 셀 너비
          • <td width=”50″>50 픽셀</td>
      • 테이블 자체를 정렬
        • <table border=”1″ align=”center”>

프레임

      • 하나의 웹브라우저 화면에 여러개의 HTML문서를 표시할때 사용.
      • 주로 네비게이션(메뉴)와 컨텐츠 부분을 분리하기 위해 사용.
      • 창을 좌우로 나누고 왼쪽프레임엔 홈짱, 오른쪽프레임엔 네이버를 불러오기
      • frameset
        • 문서를 어떻게 나눌것인가. cols=”25%, 75%”는 문서를 수평으로 2개의 프레임으로 나누고, 프레임의 넓이 비율을 25, 75로.
        • %말고 픽셀값으로도 표현 가능.(메뉴의 너비 고정할때)
          • cols=”200,*”이런식. 왼쪽 프레임의 너비를 200픽셀로 지정하고, 오른쪽 프레임은 나머지 영역을 할당하라는 의미.
      • frame
        • 프레임안에 들어가는 문서의 속성을 지정하는 태그
        • 프레임 경계선 표시. 0이면 안보이고 1이면 보임
          • frameborder=0
        • 프레임의 여백 지정
          • marginheight=”20″
          • marginwidth=”0″
        • 프레임명 지정
          • name=”menu_frame”
          • 하이퍼링크의 타겟 설정할때 중요한 의미
        • 프레임의 크기 고정하고 싶을때
          • noresize
        • 프레임내에 스크롤바 생길지 여부 지정. yes:생김 no:안생김 auto:문서가 프레임크기보다 크면 자동으로 생김
          •  scrolling=”auto”
      • 2개 이상의 프레임으로 나누기(프레임태그 중첩)
  • <frameset rows=”100,*”>
  •     <frame src=”top_menu.html”>
  •     <frameset cols=”200,*”>
  •         <frame src=”left_menu.html”>
  •         <frame src=”contents.html”>
  •     </frameset]]>
  • </frameset>
        • frame으로 나누어진 문서에서 타겟 설정 방법
          • 먼저 아래와 같이 코딩한 다음 menu.html 로 저장합니다.
            이는 왼쪽 프레임에 위치할 문서입니다.
          • 위의 소스를 보면 링크의 타겟값을 right로 지정했음을 알 수 있습니다.
            이는 right라는 이름을 가지고 있는 프레임에 링크가 걸린 페이지를 불러온다는 의미입니다.
            frame.html
            왼쪽 문서가 만들어졌으면 이제는 프레임을 정의하는 문서를 만들어 보겠습니다.
            아래와 같이 코딩한 다음 frame.html로 저장합니다.
  • <frameset cols=”150,*”>
  •     <frame src=”menu.html”>
  •     <frame src=”http://www.homejjang.com” name=”right”]]>
  • </frameset>
          • 왼쪽 문서의 링크의 타겟값이 right로 지정했으므로 오른쪽 프레임의 name 값을 right 지정해야 합니다.
            이렇게 타겟값과 프레임의 이름을 동일하게 맞춰주어야만 링크한 문서가 타겟에 설정한 프레임에 나오게 됩니다.

리스트

        • 순서 있는 리스트(Ordered lists)
          • <ol>
          •     <li>리스트1</li>
          •     <li>리스트2</li>
          • </ol>
        • 순서 없는 리스트(Unordered lists)
          • <ul>
          •     <li>쩜리스트</li>
          •     <li>쩜리스트2</li>
          • </ul>
        • type
          • <ol type=”A”>
            • A, B, C…  이런 리스트 만들 수 있음
            • a, I, i, 1등을 사용 가능
        • 정의 목록
          • <dl>
          •     <dt>악어</dt>
          •     <dd>입이 길고 큰 동물</dd>
          • </dl>

div & span

        • 의미적으로 중립
          • 아무런 의미도 부여되지 않은 요소
          • id, class속성과 함께 사용하여 문서에 구조를 더해준다.
          • 컨텐츠를 묶고, 추가적인 정보를 제시, 스타일과 동작을 더하기 위한 구실을 해줌.
          • 나중에 HTML문서를 흝어보았을 때 이것이 페이지의 어떤 부분인지 단서를 제공
        • 인라인 & 블럭
          • div
            • 블럭 요소 : 문서의 구조를 표현하는데 도움됨.
            • division 의 약자
            • 다른 블럭 레벨 요소들을 감싸서 하나로 묶는 역할 한다.
          • span
            • 인라인 레벨의 포괄적 컨테이너
            • 문서 구조 묶는데 도움
            • 인라인 요소들 또는 평범한 텍스트들을 감싼다.

HTML5 시맨틱 태그

  • 시맨틱 태그
    • 태그를 통해서 의미를 전달. 소스를 보면 코드가 한눈에 쏙!
  • section
    • 문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌때 사용.
    • 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조 갖지 않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향 안줌.
    • 신문기사와 같은 배포형은 section이 아닌 article 사용
    • section에 스타일이나 스크립트를 지정하려 한다면 div를 사용.
  • article
    • 문서내의 독립적인 글, 블로그 글이나 뉴스 본문등을 구성하는 섹션.
    • article 안에서 header, footer와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관없음
    • article요소가 중첩될경우 중첩된 article요소는 서로 상호관련이 있어야 한다.
      • ex) 블로그 글을 나타내는 article요소 내부에 블로그 방문자 댓글이나 의견을 article요소로 넣을 수 있다.
  • aside
    • 섹션의 내용과 관련없진 않지만 분리되어도 문제없는 섹션. 주로 사이드바 형태로 표현.
    • aside태그는 본문 내용에 대한 추가적인 설명할때 사용하는 태그. 본문과 별도로 추가적인 언급을 할때 사용.
  • header
    • 머릿말 태그, 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정.
  • footer
    • 페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분.
  • menu
    • 페이지 내 기능을 하는 버튼/링크의 모음(대표적으로 툴바)을 나타낸다.
    • type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.
  • nav
    • 외부 페이지로 연결되는 링크의 모음