Add Kim

Add Kim님의 아티클

Add Kim

Add Kim

연습물들을 위한 웹사이트를 만들어봤어요

며칠 전 부터 일러스트레이터를 배워볼겸 여러가지 연습물들을 만들고 있습니다.

스크린샷 2024-06-23 14.18.19.png

이 연습물들을 아카이빙 할 공간을 직접 만들어보면 좋겠다 싶어서
프레이머로 저만의 사이트를 제작해봤습니다.

반응형도 되어있습니다 !


[홈페이지 - 메인배너]

hover시 인터렉션

스크린샷 2024-06-23 14.19.58.png


[홈페이지 - 디자인 10원칙 | 디터람스 ]

스크린샷 2024-06-23 14.20.21.png


[홈페이지 - 디자이너 하이퍼링크 ]

스크린샷 2024-06-23 14.22.03.png


[홈페이지 - 푸터 ]

코스모스, 세이브, 인스타그램, 노트폴리오에도 아카이빙 중입니다 !

스크린샷 2024-06-23 14.22.40.png


[작업물 페이지 - 탑 바, 작업물들]

스크린샷 2024-06-23 14.23.25.png

별볼일 없는 글과 작업물들에 관심 가져주셔서 감사합니다 !

4
0
Add Kim

Add Kim

| 좋은 것은 무엇인가에 대해

개발 시작한지 : 169일

팀 합류 : 2일


서문 )

팀에 합류하고 가장 먼저 시작한 업무는

' 좋은 SaaS는 어때야 하는가 ' 에 대한 고찰이었습니다.

저는 이 질문에 답하기에 앞서

먼저 '좋다' 라는 것이 무엇인지부터 확실히 이해하고 싶었습니다

제가 어떤 단어를 이해하기 위해 가장 먼저 하는 행동은 그 단어의 정의를 찾아보는 것입니다 .

스크린샷 2024-02-20 오후 2.15.15.png

이 내용을 보고 '좋은 것' = '수준이 보통 이상인 것' 이라는 결론이 도출됐고

여기서 또 '수준' 이란 정확히 무엇인지 궁금해져 찾아보았습니다

스크린샷 2024-02-20 오후 2.17.28.png

이것을 보고 '수준' = '가치' 라는 사실을 명확히 알게되었습니다.

정리하자면

" 좋은 것 = 수준이 보통 이상인 것 = 상대적으로 가치가 높은 것 "

그렇다면 또 궁금증이 생깁니다

가치 ( value ) 란 무엇일까요?

또한 " 가치가 높다 " 라고 평가되는 것들은 어떤 이유에서 그렇게 평가받는 것일까요?


1. 가치란 무엇인가

우리는 각각의 가치관을 통해

추구하는 목표를 세우고 ,

행동을 이끄는 동기를 만들어내죠

즉, 가치란 개인의 관점에서

' 자신의 삶에 얼만큼의 의미를 부여하는지를 기준하는 단어라고 볼 수 있는거죠 '

그래서 우리는 자신만의 경험과 이해를 통해, 개인적인 가치를 창조해야 하는 것입니다


자기계발적인 얘기는 여기서 끝마치고

그렇다면 여러 사람들이 "가치가 높다" 라고

평가하는 것들은 어떻게 정해지는 걸까요?

이 질문에 답을 구하기위해

사람들이 ' 가치가 높다 ( 좋다 ) ' 고 느끼는 서비스 나 물건들의 특징들을 살펴봤어요

  1. 개인적 의미와 연결성 :

    사람들은 물건이나 서비스가 개인에게 특별한 의미를 가지거나,

    그들의 삶과 깊게 연결되어 있다면, 높은 가치를 지닌다고 평가되요

  • ex ) 개인의 취미나 열정을 지원하는 도구나 서비스

  1. 품질과 내구성 :

    물건이 오랫동안 사용될 수 있고, 그 사용 과정에서 지속적으로

    높은 품질을 유지한다면 가치가 높다고 평가되요

  • why? ) 내구성과 유지보수가 쉬운 제품은 장기적으로 볼 때 경제적으로

ㅤㅤㅤㅤㅤㅤ현명한 선택을 했다고 느끼게 하기 때문이에요

  1. 혁신성과 창조성 :

    시장에 새로운 해결책이나 독창적인 접근 방식을 제공하는 물건이나 서비스는

    그 혁신성 덕분에 높은 가치를 지닌다고 평가되요

  • why? ) 이는 기존의 문제를 해결하거나 사용자 경험을 획기적으로 개선할 수 있는

    ㅤㅤㅤㅤ잠재력을 가지고 있기 때문이에요

  1. 정서적 만족 :

    물건이나 서비스가 개인에게 정서적 만족이나 즐거움을 제공한다면, 높은 가치로 평가되요

  • ex ) 예술작품이나 음악 , 여행서비스 등


이들은 단순히 경제적 가치를 넘어선,

그 물건이나 서비스가 인간의 삶의 질을 어떻게 향상시키는가,

우리의 삶에 얼마나 의미있는 변화나

향상을 가져다주는가 평가되는 것입니다


이렇게 좋은 SaaS란 무엇인가에 대한 본질적인 물음을 시작으로

가치에 대한 정확한 이해까지 도달하여

실제로 SaaS를 디자인하고 구현할 때

본질적으로 가치있는 제품을 만들 수 있는 인사이트를 터득할 수 있었던것 같습니다.

다음에는 다른 배운점을 들고 또 찾아오겠습니다 !

긴 글 읽어주셔서 감사합니다 !! 🙇🏻‍♂️

6
4
Add Kim

Add Kim

| 익숙한 환경을 떠나고 새로운 기회를 찾아서 - 기록의 시작

개발 시작한지 : 168일

팀 합류 : 1일

안녕하세요 아이티쿤 입니다 !

개발을 시작하고 내가 만드는 것들을 어딘가에 올리자 ! 라고 마음을 먹고

디스콰이엇에 꾸준히 작업물들을 올리기를 언 100일쯤

저에게 뜻밖의 기회가 찾아왔습니다

스크린샷 2024-02-19 오후 12.01.02.png

바이올렛페이 ( 현 : point3 ) 에서 팀 합류를 제의해주신 것입니다.

보자마자 너무 좋은 기회라고 생각이 드는 동시에

아직 많이 부족한 저에게

이런 제의를 주신것에 대해 많은 의문과 걱정이 들었습니다 .

하지만 이 소중한 기회를 놓치기 싫었고,

적극적으로 팀 합류에 대한 긍정적 의사를 표했습니다

그러고선, 오프라인에서 만나뵐 기회가 생겨

여러 대화 끝에 팀에 합류하게 되었습니다.


저는 오늘부터 제가 이 팀과 제가 성장하며 겪는

좌충우돌한 모든 경험 들을 기록할 예정입니다

제가 어떤 근거로 의사결정을 내렸고, 어떤 것을 배웠고 ,

그 안에서 느낀 인사이트는 무엇인지

모두 상세하게 기록해나가보도록 하겠습니다 !! 😊

13
8
Add Kim

Add Kim

논스 도전장학금에 지원하기 위해 제작한 나를 담은 웹사이트

개발을 시작한지 : 155일

지금까지 배운것 ( html , css ) 들을 적극 활용해서

최대한 저라는 사람을 표현하는 웹사이트를 만들기 위해 노력했습니다!

사실상 처음으로 포장까지 끝낸 최초의 프로젝트 같네요

재밌는 인터렉션들이 많으니 즐겁게 음미해주세요 !


1. 메인페이지 / UJIN KIM ( who? )

image.png

언제( when ) 를 제외한 육하원칙 ( who , where , how , what , why ) 을 바탕의

각각 다른 컨셉으로 디자인된 페이지를 통해 저를 탐구할 수 있습니다.


2. JEJUBOY ( where? )

image.png

이 페이지는 제가 어디에서 살아왔는지 알리기 위해 간단하게 제작된 인터렉션 페이지 입니다.


3. 20202020 ( how? )

image.pngimage.png

이 페이지는 제가 20년의 인생을 어떻게 살아왔는가에

대해 소개하는 페이지입니다

살아오며 큰 저에게 영향을 주었던 나이를 시각적으로 표현했습니다


4. MAKE IT NEW ( what? )

image.png

이 페이지는 제가 프론트엔드 개발을 시작하고 무엇들을

만들었는지 보여주기 위한 페이지 입니다

제가 현재 가장 좋아하는 디자인요소인 노출콘크리트를 웹페이지에 활용해보았습니다


5. PHILOSOPHY ( why? )

image.pngimage.png

이 페이지는 제가 왜 프론트 엔드 개발을 시작하게

되었나에 대한 고찰을 확인할 수 있는 페이지 입니다.


제 첫번째 프로젝트에 관심을 가지고 글을 끝까지 읽어주신 모든 분들에게

진심의 감사함을 보냅니다 !

아마 이 프로젝트가 HTML , CSS 만을 사용한 마지막 프로젝트가 될것같네요

현재 vue.js를 열심히 공부하고 있답니다 ㅎㅎ

그럼 좋은 하루 보내세요 !

피드백은 언제나 환영합니다 !

9
0
Add Kim

Add Kim

논스 도전 장학금 불합격 회고

개인적으로 존경하는 지인분의 추천으로 논스 도전 장학금에 신청했었습니다.

제주에 거주하고 상경욕심이 큰 저로써는 더할나위 없이 좋은 기회라고 생각해서

마감까지 1달전부터 거의 매일을 카페에서 지내며 자소서를 쓰고,

프론트엔드 개발자로써 저를 표현할 수 있는 웹사이트 를 제작했었습니다.

하지만 결과는 1차 불합격

거두절미하고 이번 실패경험에서 제가 느낀점은

"때가 맞지 않았다" 입니다

저에겐 아직 잠재력을 온전히 발산할만한 실력과 이를 증명할만한 근거(전문성)가 많이 부족합니다

이러한 문제는 제가 세상을 혁신하는것에 집중하는것이 아닌

저의 성장에 집중하게 되기에 논스 공동체의 취지와 안맞지 않았나 생각해봅니다

비록 논스에 불합격 했지만

논스에 걸맞지 않은 사람이다 라고 생각이 들진 않습니다.

지금은 전문성의 부족함으로 인해 저의 성장을 위해 많은 시간을 투자 하고 있지만

프론트엔드 개발자로서 실력이 충분해져

나의 문제보다 세상의 문제에 집중할수 있게 된다면,

그땐 논스라는 공동체와 상호협력 할 수 있는 사람이지 않을까 라고 희망해봅니다



15
8
Add Kim

Add Kim

빈티지 영화의 시각적 효과를 웹사이트에 적용해봤다

처음으로 저를 소개하는 웹사이트를 제작하고 있습니다 !
현재는 메인 페이지를 완성했고 이제 추가적으로 연결 페이지들 만들 예정이에요 !
만들게 되면 또 올리도록 하겠습니다 !

개발에 뛰어든지 : 132일

[ 체험 해보기 ! ]

image.png

옛날 영화의 안좋은 화질의 느낌과
특유의 어두운 색감 ,

투박한 폰트로 빈티지한 느낌을 줘봤습니다

영화자막 효과와 레이아웃을 통해 최대한 영화처럼 보이게 하고 싶었어요

마우스 커서 인터렉션에 손전등의 빛을 쏘는듯한 효과를 적용해서 웹을 구경하는 재미를 더했습니다 !

재밌게 봐주시고

더하면 좋겠는 기능이나 효과같은것들 피드백 해주시면 정말 감사하겠습니다 !

0
0
Add Kim

Add Kim

프론트엔드 입문하고 첫 정식 프로젝트 제작을 시작했어요 !

개발에 뛰어든지 : 115일

[ 체험 해보기 ! ]

피드백은 사랑입니다

image.png

골든서클이론에 기반해서 목표를 설정하고, 목표의 신념과 목적을 잊지않게 상기시켜주는 콘텐츠를 만들어 보고싶어, 제 나름대로 만들어보고 있습니다 !

오늘부로 긴 잠적을 깨고 메인 홈페이지를 완성한걸 올려봅니다 !

하지만.. 이제 시작이겠죠 ? ㅎㅎㅎ

0
2
Add Kim

Add Kim

초보자가 코딩을 이해하기 위한 발악.. ( 코드의 진행을 시각화해봤다 )

개발에 뛰어든지 : 83일

  • 빨간색은 변수 모음

  • 보라색은 동기적으로 실행되는 함수들

  • 초록색은 비동기적 함수들

[ 아이티쿤 미로노트 보러가기 ]

image.png[ 코드의 결과물입니다 ! ]

이렇게 구조적으로 코드를 짤수있는 툴이 생기면 너무 좋을것같아요 !

제가 아이디어 드렸으니까 고수분들이 만들어주셔야 합니다

7
2
Add Kim

Add Kim

JavScript 집중하느라 프로젝트들을 못만들고 있네요 ㅠㅠ

개발에 뛰어든지 : 82일

하루에 한개씩 프로젝트 만들기로 했었는데 자바스크립트 라는게 생각보다 너무 복잡하네요 ㅜ

정말 열심히 공부하고 있습니다 !

얼른 숙련도를 길러서 만들고 싶은거 모두 만들어보고 싶네요 !

기대해주세요! 🙇‍♂️🙇‍♂️

image.png

위에 사진은 제가 Miro 라는 툴로 공부하는 모습입니다 !

정말 좋은 툴이니까 다들 활용해보셨음 좋겠네요 ㅎㅎ

[ 아이티쿤 miro 구경 ]

5
0
Add Kim

Add Kim

새로나온 GPTs 로 니체 환생시켜서 대화하는법 ( 초간단 )

몇일 open AI 에서 출시한 따끈따끈 신기술 뒤쳐지면 안되겠죠?

GPTs 를 활용하는 방법을 알려드리기 전에 결과부터 보여드리겠습니다

( 글 아래에 추가로 대화한 내용도 있습니다 )

image.png


1.GPTs 를 만드는 곳으로 들어간다

image.pngimage.png


2.Confiqure 들어가서 대충 이름 정해주고

Descirption 정해주고 대충 프로필사진도 넣어준다

image.png


3.프롬프트 ( 원칙 ) 을 정해서 적어준다

- 오른쪽 대화창과 직접 대화 해보면서 부족한거나 것들을 원칙으로 넣으면 됩니다

image.pngimage.pngimage.png


4. 프로젝트 구텐베르크 라는 사이트에서 니체 서적들을

PDF 로 다운받는다

▶저작권이 만료된 퍼블릭 도메인의 교양서적들을 무료로 공개하는 프로젝트, 혹은 그 사이트

image.png


5. 다운 받은 파일들을 knowledge 에다가 업로드해준다

image.png


6. 니체환생

image.pngimage.pngimage.png


부자연스러운 부분도 아직 있지만 충분한 시간을 투자해 프롬프트를 잘 작성한다면

더 좋은 퀄리티로도 만들수 있을것같네요 !

대화하는데 충분히 몰입되고 많은 지혜를 얻었습니다 ..

정말 간단하고 , 값싸게 수준높은 지식을 얻을 수 있는 이 시대에 태어난것에 감사함을 느끼네요 ㅎㅎ

대화해보고 싶은 위인이나 , 기능들을 직접 만들어보세요 !

글 읽어주셔서 감사합니당 🙇‍♂️



11
6
Add Kim

Add Kim

7번째 프로젝트 : 브루탈리즘 기반 전염병 공익광고 홈페이지

개발을 시작한지 : 74일째

image.png

image.png

[ 체험 해보러 가기 ]

[ 아이티쿤 프로젝트 콜렉션 구경하러가기 ]

GIF출처 : SAVEE

만드는데 걸린시간 : 4시간

기본기 연습을 위해서 꾸준하게 하루에 하나씩 무엇인가를 만들려고 노력중입니다 !

오늘은 최근에 브루탈리즘에 대해 알게되어서 한번 응용해서 직접 만들어봤어요 !

뭔가 감각적이기도 하고, 또 대충만든거 같으면서도 그 작품안에 의미는 가득해서 음미하기 좋은

브루탈리즘의 매력에 빠진것 같네요 ㅎㅎ

여러분들도 한번 제가 만든 웹사이트 음미해보면서 각자만의 떠오르는 생각과 의미를 댓글로 적어주시면

감사하겠습니다 !

2
3
Add Kim

Add Kim

비전공자 고등학생이 3개월 배우고 만든 뉴모피즘 기법 체험 웹사이트 !

최근에 뉴모피즘 기법에 꽂혀서 여러분들도 이 기법에 매력을 느끼셨으면 하고자 이 웹사이트를 간단하게 제작해봤어요!

여러분도 뉴모피즘의 촉각적인 매력의 뉴모피즘에 빠져보세요 !

image.png

[ 뉴모피즘 기법 체험하러 가기 ]

[ ▲ 위에 주소가 안될경우 ]

[ 아이티쿤 인스타그램 ]

10
2
Add Kim

Add Kim

비전공자 고등학생이 웹개발,디자인 분야에 뭣도 모르고 무작정 발을 들인지 3개월... 최근 만들었던것들

HTML , CSS 를 2개월 정도 독학하고 JavaScript 를 배우고 있습니다 !

배운것들을 응용해서 , 제가 좋아하는 디자인을 접목해서 한번 제작해봤어요 !

피드백이나 , 비판을 정말 좋아합니다 !

부담없이 보시고 솔직하고 객관적인 의견 남겨주시면 감사하겠습니다 !

[아이티쿤 코드펜 Collection]

[아이티쿤 인스타그램 에서도 만들고, 제작하는 것들을 볼 수 있습니다 !]

15
13
Add Kim

Add Kim

한 우물만 파야하는 것은 나 자신 뿐 ( 내가 개발을 시작한 이유

짧다면 짧고 길다면 긴 19년의 생을 살아오며

주체적이고, 독립적이었던 저는

또래에 비해 많은 분야에 도전했었습니다

영상편집 , 요식업 , 바리스타 , 음악 , 증권 , 회계

지금의 프로그래밍 분야까지

모두 나름대로 진지하고 열정적으로 팠던 분야들 이지만

" 왜 이렇게 한 우물만 파지 못했냐" 라고 물으실 것 같네요 ,

제가 생각해도 그렇구요

그 이유는 제가 어렸을때부터 자기인식과 성장 에 대한 욕망이 컸기 때문인것 같다고 생각합니다. 예전부터 저는 책 대신 유튜브에 많은 시간을 할애 했었는데,

자극적인 콘텐츠가 판치는 유튜브 세상에서

저는 특이하게도 자기계발 , 철학 , 심리학 , 진화학 , 우주과학 등등 과 같이

나라는 사람에 대해 고찰할수 있고 , 성장시켜주는 콘텐츠에 끌렸고, 그런 영상을 즐겨봤습니다.

그로인해 자연스럽게 저는 어릴때부터 남들이 만든 기준에 부합하는

직업이나 취미를 정하는 것이 아닌

나라는 사람과 환경을 고려하여 즐길수 있는 최선의 분야들을 선택해서 진지하게 매진했었죠

학교에서 밴드부 동아리도 해보고 , 육지로 상경해서 대형 오디션에도 참가해보고

한식 조리 자격증이나 바리스타 자격증도 공부해보고,

집 주변에 대형 카페에 자소서를 들고 무작정 찾아가보기도 하고

주식과 경제에 대해 정말 열심히 매진하기도 하고,

미래에셋 금융인 양성과정 프로그램에도 도전해서 지점장님에게 가르침도 받아보고

이렇듯 큰 용기가 필요한 도전을 연속적으로 경험하며,

내가 더 즐길수 있는,

잘할 수 있는 ,

진심으로 좋아할 수 있는 ,

흥분감과 몰입을 선사하는, 그런 분야를 찾아나섰죠

제가 계속해서 저의 분야가 바꼈던 이유는

끊임없는 자기계발로 자기인식의 수준이 높아지고

그에 따라 나와 더 잘맞는 , 그러한 분야를 선택했기 때문이라고 할 수 있겠네요.

비록, 매진했던 분야를 책임감이 포기하는 사람처럼 보일 수 있지만,

저의 생각은 다릅니다

"분야를 포기했다" 는건 맞는 말 일 수 있지만

제가 포기하지 않고 집중한건 " 나 자신 " 이였기 때문에,

실패를 두려워 하지 않고 새로운 분야에 열정적으로 몰입하고, 배울수 있다고 생각합니다.

제가 지금 개발 이라는 분야를 선택한 이유는

제가 대략 4개월전 고등학교에서 주식과 경제를 독학하고 있던 저는

교육청에서 진행하는 국비지원 직업학교연계교육 프로그램을 듣고 흥미를 느껴 신청했고,

처음으로 가족과 떨어져 타지에서 생활하며

제가 굉장히 독립적이고 , 주체적인 성향과 높은 적응력 가지고 있단것을 알게되었고

예전부터 저의 창의력을 사용해서 무엇인가를 직접 만들고,

통찰력과 높은 직관력으로 문제를 해결하는것에 큰 흥분감을 느끼는 저는

워드프레스로 입문하여 웹개발에 흥미를 느껴

프로그래밍 분야에 큰 매력과 흥미를 느껴 도전하게 되었습니다.

확실한 자기인식의 근거해서 도전한 분야라 그런지

하루에 7~8시간을 이 분야에 할애해도 딱히 힘들고 피곤한 감정없이

열정적으로 배우고 즐겁게 매진하는 제 자신을 보며 기특하기도 하고,

나와 정말 적합한 분야를 찾아 기쁘기도 합니다.

제 글이나 제가 맘에 들었다면

떠오르는 생각들을 올리는 제 블로그도 가볍게 구경하시면 좋겠습니다 !


가볍게 쓴 글들 이라 부족한점이 많아요 !

9
0
Add Kim

Add Kim

제가 이런 실사적인 디자인의 UI 를 좋아하는데..

저는 웹개발 , 웹디자인 분야를 독학하고 있는 초보자 학생입니다 !

제가 이런 실사적인 디자인의 UI 를 좋아하는데

제 경험상 웹사이트에서 이런 디자인을 적극적으로 ( 메인으로 ) 채택한 웹사이트나 앱이 없는것 같더라구요 ..

제 생각으로는 이런 디자인이 웹 사용자의 경험에 엄청 좋은 경험이 될것같은데

이런 디자인을 실무에서 채택하지 않는 이유가 있을까요?

image.pngimage.png출쳐 : Behance

13
10