제목 후보 : << GP와 나 / 최종화 >> 지피터스는 하이호의 고백을 받아줄까.....?
가난한 17기 수료생인 하이호가
지피터스를 사랑해서
줄 수 있는 게 이 사이트밖에 없다
가진 거라곤 이 사이트밖에 없다
버디로서 지피터스의 곁을 지키고 싶엇는데
그렇게 됐다...
💫💫 소개 💫💫
안녕하세요, 저는 지피터스 17기 스터디에서 피그마MAKE 활용법을 배웠습니다!
이번에 피그마MAKE로 지피터스 스터디 수료 기념으로 사이트를 하나 만들었습니다.
제목은 어그로고 사실 디자인 살짝 따온 정도에 불과합니다.
🌠 만든 계기
17기가 끝나가서, 아쉬운 마음이 들었습니다.
이번 기수 동안 나름대로 열심히 하였고, 따라서 나름대로 성장하였고, 다른 분들께서 감사하게도 격려를 많이 해주셨기 때문입니다.
그래서 다음 기수도 계속 하고 싶단 생각이 들었지만, 제가 수익이 없는 백수인지라(._.) 일단 할 수 있는 데까진 어필을 해봐야겠단 결심을 했습니다.
그러한 진심에, 농담을 적절히 버무려서 사이트를 만들었습니다.
^________________________^ 재미난다 재미나~
💫💫 사이트 디자인 이모저모 💫💫
사이트를 헤더와 푸터 제외하고 크게 3섹션으로 만들었고, 지피터스의 디자인을 따왔습니다.
🌠 1번째 섹션
가. 전체 화면
지피터스
만든 사이트
엄밀히 따지면 디자인이 좀 다르지만....
손보고 싶지만!
적당히 타협했습니다!
이런 소소한 거 컨트롤하려다가 버전이 무수히 쌓인 경험이 후두두두둑~
이거 만들 당시 더 중요한 우선순위가 있었으니까 넘어갔습니다.
이런 소소한 거 신경써도 완성도가 100% 아니면 잘 티가 안나니까요...
나. 커버
지피터스
맹간 사이트
비슷하게 하려고 이미지 직접 만들었습니다.
피그마 메이크 자식이 그라데이션 효과를 이해못하더라구요!!
개발자도구에서 코드 따려고 했는데 이미지라서 그러지도 못하고~!
이미지 그대로 다운 받기에는 배경이 아니라 폰트도 섞인 거였고!
직접 만드는 게 빠르다고 판단했습니다.
버튼 마음에 안드는데... 이것도 그냥 타협했습니다.
다. 우측 상단 버튼
지피터스 맹간 사이트
[+] 버튼 눌러서 넣을 게 없어서
사이트 여담을 넣는 [?]를 넣었습니다~!
웬만하면... 저런 동그란 모양이 아니라 네모 모양으로 하고 싶었는데, 그렇게 해서 완성도 높이고 싶었는데, 이 역시 타협~!
🌠 2번째 섹션
지피터스
맹간 사이트
원본 레이아웃을 좀 참고했습니다.
원본은 후기 카드지만, 저는 그냥 카드로 해서 슬라이드 구성하였습니다.
제목과 부제목의 색상을 서로 변 경했습니다.
눈에 잘띄게 하기 위해 + 슬라이드 그룹 제목과 분리하기 위해 제목을 주황으로 바꿨습니다.
🌠 중간 배너
2번째 섹션과 3번째 섹션 각각 참고한 레이아웃이 있는데
원본 페이지에서 그 사이에 이런 배너가 있더라구요.
섹션을 바로 이어가면 보기가 좀 그러하니
저도 배너를 넣었습니다!
지피터스
맹간 사이트
원본과의 차이점
원본은 글자가 더 큼
원본은 움짤
이모티콘 위치 바꾸고 싶어~~~!! </BR> 였나요 </B> </N> 였나요 줄넘김이 ?
🌠 3번째 섹션
지피터스
맹간 사이트
원본 레이아웃이 가로로 긴 직사각형 N개가 나열되어 있는 구조여서
저도 참고하여 배치하였습니다.
각각은 버튼입니다.
원래 왼쪽에 사진을 넣으려고 했는데, 피그마가 적절한 사진을 넣어주지 않았고, 제가 직접 찾기도 귀찮아서, 그냥 아이콘 하트, 별, 그 외 하나 어울리는 걸로 넣어달라고 요청하였습니다.
따단~
버튼 안은 참고한 레이아웃이 없어 사례글에선 생략합니다.
🌠 푸터
원본에는 푸터가 없는데
저는 맹갔습니다.
@ 2025 | 이 사이트는 순수한 감정으로 만들어졌습니다.
진짜진짜진짜입니다.
ㅎ.ㅎ!
제가 가난해서 문제라면,
할 수 있는 시도들을 해보기로 마음 먹은 것입니다!!
🌠 나머지 이모저모
이 사이트 여기저기 눌러보시면
재밌는 걸 보실 수 있습니다.
여기 제외하고 다 구현했습니다.
💫💫 결과와 배운 점 💫💫
어떻게 구현하였는가?
지피터스 사이트 캡쳐하여 레퍼런스로 제 시
구성요소 직접 그리기 등
섹션별로 나누어서 - 레이아웃을 지정해주고 - 세부적인 수정을 가하였음.
문구 수정 같은 건 직접 코드창에서 고쳤음.
설명이 어렵다면 지피티 봇에게 먼저 설명하여 프롬프트 도움받음.
느낀 점
디자인 벤치마킹 잘하는데, 한계가 있음.
그라데이션처럼 디자인 요소가 들어가면 잘하지 못한다.
HTML로 구현할 수 있는 부분이랑 아닌 부분을 구분하면 좋을 것임
피그마는 디자인을 어디까지 할 수 있는가? (정말루다가 궁금)
피그마에 내장된 디자인 요소를 쓸 수 있는가?
일단 픽셀풍 디자인은 구렸다. 근데 어느 정돈 할 수 있었다.
내가 픽셀풍 한글 폰트 찾아주고, 이미지 주면, 팝업 등등은 알아서 픽셀 느낌 나게 해주긴 했다.
그냥 클로드가 못하는 디자인 영역도 할 수 있는가?
같은 클로드 집안인데 피그마MAKE만 더 할 수 있는 디자인 컨셉이 있는가?
독특한 요소를 구현하려고 한다면, 어느 정도를 요소로 줘야 하는가??
💫💫 여담 💫💫
가. 이 사이트를 공개하는 타이밍에 대하여
저는 이 사이트를 25년 7월 29일 화요일에 제작하였습니다.
이왕 열심히 만들었으니 반응을 가장 좋게 수확할 수 있을 때 공개하고 싶었습니다.
그래서..
목요일 발표에서 처음으로 공개할 계획을 세웠었음. 그러나...
화요일 청강 수업에서 소감 말하다가 언질을 던졌습니다.
어차피 20명 이하였고, 거기 스터디원이 저 외에 한둘이었으므로... 파급효과가 없을 거라 판단하여 ㅎ미리 언질없이 갑자기 발표 때 주섬주섬 꺼내면서 '저 더 만들엇어용 ㅎ'하면
파급효과가 좋을 수도 있겠지만
발표 시간을 오버할 수도 있고
그로 인한 스터디장님이 곤란해하실 거라 예상되고
발표가 끝날라하니까 또 시작하는, 늘어지는 느낌을 주어 지루하게 만들 수 있었으므로 (그럴거면 깜짝쇼가 아니라, 미리 개요에서 설명을 할 수 있게)
안전하게 사례글에 먼저 언급하는 걸로 바꾸었습니다.
어차피 발표 전에 사례글 많이 안보실 거라고 예상을 했기에...
스터디장님, 파트장님은 사례글을 미리 전부 보실테고, 그 두 분은 제가 이런 걸 발표할 거라고 미리 아셔야 할테니까...
직접 양해 구하기엔 수줍은 마음으로...
그렇다면 스터디원 외 인물들에겐 어떻게 보여줄 것인가?
베스트발표를 하게 된다면: 월요일 발표에서 공개 --> 이후 단톡방 공유 --> 사례글 작성
하지 않게 된다면: 금요일에 단톡방 공유 --> 이후 사례글 작성
저는 2번째 루트로 하게 되었고 잘 지켰읍니다 ^^ 계획대로.
하지만 이게 정말 많은 분들께 닿았는지는 미지수입니다.
허헛... 열심히 만들었어요 이곳저곳 클릭해주세요 엉엉이 ㅠㅠㅠ
나. 사이트 링크 첨부에 대하여
이 사례글에 사이트 링크를 첨부하는 게 적절하겠지만
뭔가 그러기에는..
저 사이트에 제 사진이 들어가고.. 사이트 타고타고 들어가면 제 번호가 나옵니다..
그래서 뭔가 올리기 좀 그러하네용...
저 사이트 안에 제 얼굴을 올린 건 저를 기억시키는 목적에 충실하기 위해서입니다.
이름보다 얼굴을 기억하는 사람들도 많고
하이호가 어쨌다 > 어쩔? / 이렇게 생긴 하이호가 어쨌다 > 아 내가 아는 사람 ㅋㅋ
이런 식으로 이름 3글자보단 다른 요소가 함께 하는 게 효과가 더 클테고..
그럼 주목도가 더 높아질테고...얼굴 사진을 대체할 이미지가 없었기 때문입니다..
사실 처음엔 저를 캐릭터화해서 그거 올리려고 했는데 지피티가 안닮게 만들어줌!
허깅페이스에서 모델을 찾을 수 있겠지만 그렇게까지 하기에는...!
더 중요한 우선순위작업이 대기하고 있어서!
근데 여기에 제 사이트를 못올린다는 게 아쉬워서
그러한 결정이 후회가 됩니다.
바꾼다면 무슨 사진으로 교체할 것이며
귀찮다!
하지만 안바꾸면 여기 첨부 못하는데! 아!
다. 버디 지망생
버디 지망생 하이호입니다!!!!!!!111
관심 영역은 바이브코딩과 생산성!!
약간 나대는 경향이 있지만
사람은 착합니다.
잘부탁드립니다~
라. 이걸로 피그마 스터디 관련 사례글만 6개 작성!
다른 것도 포함하면 이번 한달에만 8개의 사례글을 썼습니다.
음하핫!
