diff --git a/package.json b/package.json
index c9316486..b9f849c0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
+    "build:dev": "tsc && vite build --mode development",
     "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
diff --git a/src/apis/getSearchedChallengeItem.ts b/src/apis/getSearchedChallengeItem.ts
index 15819ea9..dbd6c07f 100644
--- a/src/apis/getSearchedChallengeItem.ts
+++ b/src/apis/getSearchedChallengeItem.ts
@@ -1,3 +1,4 @@
+import { APIImage } from "@/types/apiImageType";
 import { acceptInstance } from "./axios/axios";
 import requests from "./axios/request";
 
@@ -13,9 +14,7 @@ interface Data {
   keyword: string;
   participantCount: number;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
 }
 
 const getSearchedChallengeItem = async ({
@@ -44,9 +43,7 @@ const getSearchedChallengeItem = async ({
 
       const { last } = res.data.data;
       const { pageNumber } = res.data.data.pageable;
-      return (
-        { posts: transformedContent, isLast: last, page: pageNumber } || {}
-      );
+      return { posts: transformedContent, isLast: last, page: pageNumber };
     });
   return data || {};
 };
diff --git a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
index 06fc622d..0173f5de 100644
--- a/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
+++ b/src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx
@@ -7,6 +7,7 @@ import { useQueryClient } from "react-query";
 import { encrypt } from "@/hooks/useCrypto";
 import { PATH } from "@/constants/path";
 import { format } from "date-fns";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 type instanceListPropsType = {
   instanceList: instanceListDataType[];
@@ -26,7 +27,7 @@ const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
       <ul className="flex flex-col gap-10 rounded-xl h-full">
         <>
           {instanceList.map((item: instanceListDataType) => {
-            const imageData = item.fileResponse.source;
+            const imageData = makeAPIImage(item.fileResponse);
             const startDate = format(item.startedAt, "yyyy-MM-dd");
             const completedDate = format(item.completedAt, "yyyy-MM-dd");
             return (
diff --git a/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx b/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
index 0179eb95..f515b63e 100644
--- a/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
+++ b/src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx
@@ -10,6 +10,7 @@ import { useParams } from "react-router-dom";
 import Loading from "@/components/Common/Loading/Loading";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetCertificationInstanceDetail } from "@/hooks/queries/useCertificationQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function ChallengeInformation() {
   const { id } = useParams();
@@ -29,7 +30,7 @@ function ChallengeInformation() {
     <>
       <div className="relative">
         <ChallengeImage
-          imgSrc={data.fileResponse.source}
+          imgSrc={makeAPIImage(data.fileResponse)}
           alt={"챌린지 이미지"}
         />
 
diff --git a/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx b/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
index d175b163..0ebd241b 100644
--- a/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
+++ b/src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx
@@ -3,6 +3,7 @@ import { FRAMEID } from "@/constants/localStorageKey";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetUserProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface Props {
   decryptedUserId: number;
@@ -24,7 +25,7 @@ function MyProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.source}
+            imgSrc={makeAPIImage(userProfile.fileResponse)}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />
diff --git a/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx b/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
index 58f494a5..1e8c78f0 100644
--- a/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
+++ b/src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx
@@ -1,6 +1,7 @@
 import { Profile } from "@/components/Common/Profile/Profile";
 import { useGetUserProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface Props {
   decryptedUserId: number;
@@ -20,7 +21,7 @@ function OthersProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.source}
+            imgSrc={makeAPIImage(userProfile.fileResponse)}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />
diff --git a/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx b/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
index ce99d8df..9207060f 100644
--- a/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
+++ b/src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx
@@ -4,6 +4,7 @@ import Image from "@/components/ChallengeDetail/Image/Image";
 import Information from "@/components/ChallengeDetail/Information/Information";
 import Line from "@/components/ChallengeDetail/Line/Line";
 import ParticipationCancelButton from "@/components/ChallengeDetail/ParticipationCancelButton/ParticipationCancelButton";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 import { useGetChallengeDetail } from "@/hooks/queries/useInstanceDetailQuery";
 
 interface Props {
@@ -26,7 +27,7 @@ function ChallengeDetailContent({ decryptId }: Props) {
   return (
     <>
       <div className="max-w-[54.6rem] w-full flex flex-col gap-[2.3rem]">
-        <Image imgSrc={data.fileResponse.source} alt={"챌린지 이미지"} />
+        <Image imgSrc={makeAPIImage(data.fileResponse)} alt={"챌린지 이미지"} />
         <CoreInformation
           challengeTitle={data.title}
           applicant={data.participantCount}
diff --git a/src/components/Common/ChallengeItem/ChallengeItem.tsx b/src/components/Common/ChallengeItem/ChallengeItem.tsx
index 27bb6642..75876719 100644
--- a/src/components/Common/ChallengeItem/ChallengeItem.tsx
+++ b/src/components/Common/ChallengeItem/ChallengeItem.tsx
@@ -80,7 +80,7 @@ function Image({
     horizontal: "w-[18.8rem] h-[12.6rem]",
     vertical: maxWidth
       ? `w-full ${maxWidth} ${paddingBottom}`
-      : "w-full max-w-[16.4rem] pb-[77%]",
+      : "w-full pb-[70%]",
   };
 
   const onErrorImageLoad = (
diff --git a/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx b/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
index dad86023..4d2a783b 100644
--- a/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
+++ b/src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx
@@ -2,15 +2,15 @@ import { useNavigate } from "react-router-dom";
 import ChallengeItem from "../ChallengeItem/ChallengeItem";
 import { PATH } from "@/constants/path";
 import { encrypt } from "@/hooks/useCrypto";
+import { APIImage } from "@/types/apiImageType";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface ChallengeItemProps {
   instanceId: number;
   title: string;
   participantCnt: number;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
 }
 
 interface Props {
@@ -31,7 +31,7 @@ function VerticalChallengeItems({ data }: Props) {
             onClick={() => onClick(encrypt(item.instanceId))}
           >
             <ChallengeItem.Image
-              imgSrc={item.fileResponse.source}
+              imgSrc={makeAPIImage(item.fileResponse)}
               direction="vertical"
               alt="챌린지 이미지"
             >
diff --git a/src/components/Home/InfiniteNewChallenge/InfiniteNewChallenge.tsx b/src/components/Home/InfiniteNewChallenge/InfiniteNewChallenge.tsx
index 9804629f..c3f8272b 100644
--- a/src/components/Home/InfiniteNewChallenge/InfiniteNewChallenge.tsx
+++ b/src/components/Home/InfiniteNewChallenge/InfiniteNewChallenge.tsx
@@ -27,7 +27,7 @@ function InfiniteNewChallenge() {
           </EmptyDataView>
         </div>
       )}
-      <div className="w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
+      <div className=" w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
         {data?.pages.map((page) => (
           <VerticalChallengeItems key={page.page} data={page.posts} />
         ))}
diff --git a/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx b/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
index 75e658bc..2aaab7f6 100644
--- a/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
+++ b/src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { encrypt } from "@/hooks/useCrypto";
 import { useGetPopularInstance } from "@/hooks/queries/useHomeInstanceQuery";
 import EmptyDataComponent from "../EmptyDataComponent/EmptyDataComponent";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function PopularChallengeItems() {
   const [clickPossible, setClickPossible] = useState<boolean>(true);
@@ -45,7 +46,7 @@ function PopularChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.source}
+                        imgSrc={makeAPIImage(item.fileResponse)}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >
diff --git a/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx b/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
index f080131e..f5cefbe1 100644
--- a/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
+++ b/src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { encrypt } from "@/hooks/useCrypto";
 import { useGetRecommendInstance } from "@/hooks/queries/useHomeInstanceQuery";
 import EmptyDataComponent from "../EmptyDataComponent/EmptyDataComponent";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function SuggestionChallengeItems() {
   const [clickPossible, setClickPossible] = useState<boolean>(true);
@@ -43,7 +44,7 @@ function SuggestionChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.source}
+                        imgSrc={makeAPIImage(item.fileResponse)}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >
diff --git a/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx b/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
index 8b700e3a..da002959 100644
--- a/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx
@@ -11,6 +11,7 @@ import CertificationModal from "@/components/Main/MyChallenge/MyChallengeModal/C
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { PATH } from "@/constants/path";
 import { useModalStore } from "@/stores/modalStore";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface PassItemModal {
   e: React.MouseEvent;
@@ -70,7 +71,7 @@ const MyChallengeActivityList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx b/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
index 055ed82c..acbf3254 100644
--- a/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx
@@ -9,6 +9,7 @@ import React from "react";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { useModalStore } from "@/stores/modalStore";
 import { useGetMyDoneChallenges } from "@/hooks/queries/useMyChallengeQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 const MyChallengeDoneList = () => {
   const { setModal } = useModalStore();
@@ -60,7 +61,7 @@ const MyChallengeDoneList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx b/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
index 53b19e50..7c180249 100644
--- a/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
+++ b/src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx
@@ -6,6 +6,7 @@ import MyChallengeWrap from "../MyChallengeWrap/MyChallengeWrap";
 import { useGetMyPreActivityChallenges } from "@/hooks/queries/useMyChallengeQuery";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { PATH } from "@/constants/path";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function MyChallengePreActivityList() {
   const { data } = useGetMyPreActivityChallenges();
@@ -29,7 +30,7 @@ function MyChallengePreActivityList() {
                 <div className="min-w-[16.4rem] w-[16.4rem] h-[12.6rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >
diff --git a/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx b/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
index f716152d..284c90d2 100644
--- a/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
+++ b/src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx
@@ -2,6 +2,7 @@ import ChallengeItem from "@/components/Common/ChallengeItem/ChallengeItem";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { PATH } from "@/constants/path";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 import {
   useDeleteLikesChallenge,
   useGetInfiniteLikedChallenges,
@@ -51,7 +52,7 @@ function InfiniteInterestChallenge() {
           </div>
         )}
         {!!data?.pages[0].posts.length && (
-          <div className="pt-[3rem] _sm:pt-[1.6rem] w-full max-w-[51.5rem] _sm:max-w-[34.9rem] grid grid-cols-3 gap-x-[1rem] _sm:grid-cols-2">
+          <div className="w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
             {data?.pages.map((page, pageIndex) =>
               page.posts.map(
                 (post: InstanceThumbnailDataType, postIndex: number) => (
@@ -63,11 +64,9 @@ function InfiniteInterestChallenge() {
                       onClick={() => onClickChallengeItem(post.instanceId)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={post.fileResponse.source}
+                        imgSrc={makeAPIImage(post.fileResponse)}
                         alt={"챌린지 이미지"}
                         direction="vertical"
-                        maxWidth="max-w-[16.5rem]"
-                        paddingBottom="pb-[72.7%]"
                       >
                         <ChallengeItem.Heart
                           onClick={(e) => onClickHeart(e, post.likesId)}
diff --git a/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx b/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
index ed700992..3bb12a35 100644
--- a/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
+++ b/src/components/MyPage/MyPage/MyProfile/MyProfile.tsx
@@ -6,6 +6,7 @@ import { FRAMEID } from "@/constants/localStorageKey";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetMyProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function MyProfile() {
   const { data } = useGetMyProfile();
@@ -29,7 +30,7 @@ function MyProfile() {
               />
             )}
             <Profile.Image
-              imgSrc={data.fileResponse.source}
+              imgSrc={makeAPIImage(data.fileResponse)}
               alt="프로필 이미지"
               width="w-[10.2rem]"
             />
diff --git a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
index 102c9e10..eff74e7d 100644
--- a/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
+++ b/src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx
@@ -15,9 +15,9 @@ import { Input, TextArea } from "@/components/Common/Form";
 import { useGetCheckNickName } from "@/hooks/queries/useUserQuery";
 import Button from "@/components/Common/Button";
 import ProfileImage from "../../MyPage/UserEdit/UserImg/UserImg";
-import { makeBase64URL } from "@/utils/makeBase64URL";
 import userImage from "@/assets/icon/image-edit.svg";
 import CommonModal from "@/components/Common/CommonModal/CommonModal";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface UserInformationFormType {
   nickname: string;
@@ -136,15 +136,11 @@ function UserInformationEditForm() {
   };
 
   useEffect(() => {
+    if (!profileData) return;
     const file = changedImage?.[0];
 
     if (!file) {
-      setImagePreview(
-        makeBase64URL({
-          uri: profileData?.fileResponse?.source,
-          format: "jpg",
-        })
-      );
+      setImagePreview(makeAPIImage(profileData.fileResponse));
       return;
     }
 
@@ -154,7 +150,7 @@ function UserInformationEditForm() {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [profileData?.fileResponse?.source, changedImage]);
+  }, [profileData, changedImage]);
 
   const validateFileSize = (files: FileList | null) => {
     if (!files?.length) return true;
diff --git a/src/helpers/makeAPIImage.ts b/src/helpers/makeAPIImage.ts
new file mode 100644
index 00000000..02fb9c60
--- /dev/null
+++ b/src/helpers/makeAPIImage.ts
@@ -0,0 +1,8 @@
+import { APIImage } from "@/types/apiImageType";
+import { makeBase64URL } from "@/utils/makeBase64URL";
+
+export const makeAPIImage = (file: APIImage) => {
+  const { source, environment } = file;
+  if (environment === "LOCAL") return makeBase64URL({ uri: source });
+  else return source;
+};
diff --git a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
index a29505f8..64dcb71b 100644
--- a/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
+++ b/src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx
@@ -18,7 +18,7 @@ import { interestsOption } from "@/data/InterestData";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { ko } from "date-fns/locale";
-import { makeBase64URL } from "@/utils/makeBase64URL";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 type DateRange = [Date | null, Date | null];
 
@@ -108,12 +108,7 @@ const InstanceEdit = () => {
     trigger("image");
     const file = image?.[0];
     if (!file) {
-      setImagePreview(
-        makeBase64URL({
-          uri: instanceDetail?.fileResponse?.source,
-          format: "jpg",
-        })
-      );
+      setImagePreview(makeAPIImage(instanceDetail.fileResponse));
       return;
     }
 
@@ -123,7 +118,7 @@ const InstanceEdit = () => {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [image, instanceDetail?.fileResponse?.source, trigger]);
+  }, [image, instanceDetail, trigger]);
 
   useEffect(() => {
     if (instanceDetail) {
diff --git a/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx b/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
index fea192df..cc2a11ca 100644
--- a/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
+++ b/src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx
@@ -9,6 +9,7 @@ import { useParams } from "react-router-dom";
 import { AllWeekCertificationDataType } from "@/types/certificationType";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { useGetAllCertificationWeek } from "@/hooks/queries/useCertificationQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function OthersCurrentCertification() {
   const { id } = useParams();
@@ -39,7 +40,7 @@ function OthersCurrentCertification() {
                 <div>
                   <div className="flex justify-between mb-[2.3rem] _sm:mb-[1.7rem]">
                     <OthersProfile
-                      imgSrc={post.profile.source}
+                      imgSrc={makeAPIImage(post.profile)}
                       alt="프로필 이미지"
                       nickName={post.nickname}
                       frameId={post.frameId}
diff --git a/src/types/adminType.ts b/src/types/adminType.ts
index ae260a47..88d5ebb2 100644
--- a/src/types/adminType.ts
+++ b/src/types/adminType.ts
@@ -1,3 +1,5 @@
+import { APIImage } from "./apiImageType";
+
 export type adminTopicEditApiType = {
   topicTitle: string;
   topicDesc: string;
@@ -35,10 +37,7 @@ export type uploadFileTye = {
 export type adminTopicDataType = {
   title: string;
   topicId: number;
-  fileResponse: {
-    fileId: number;
-    source: string;
-  };
+  fileResponse: APIImage;
 };
 export type topicDeteilType = {
   topicId: number;
@@ -47,15 +46,12 @@ export type topicDeteilType = {
   description: string;
   notice: string;
   pointPerPerson: number;
-  fileResponse: {
-    fileId: number;
-    source: string;
-  };
+  fileResponse: APIImage;
 };
 export type topicListType = {
   topicId: number;
   title: string;
-  fileResponse: { fileId: number; source: string };
+  fileResponse: APIImage;
 };
 export type instanceListDataType = {
   topicId: number;
@@ -63,7 +59,7 @@ export type instanceListDataType = {
   title: string;
   startedAt: string;
   completedAt: string;
-  fileResponse: { fileId: number; source: string };
+  fileResponse: APIImage;
 };
 export type instanceDeteilType = {
   topicId: number;
@@ -75,10 +71,7 @@ export type instanceDeteilType = {
   pointPerPerson: number;
   startedAt: string;
   completedAt: string;
-  fileResponse: {
-    fileId: number;
-    source: string;
-  };
+  fileResponse: APIImage;
 };
 export type instanceCreateApiType = {
   instanceTitle: string;
@@ -96,7 +89,7 @@ export type instanceCreateFileApiType = {
   instanceImg: File;
 };
 export type fileType = {
-  file?: { fileId?: number; source?: string };
+  file?: APIImage;
 };
 export type fileDataType = {
   lastModified: number;
diff --git a/src/types/apiImageType.ts b/src/types/apiImageType.ts
new file mode 100644
index 00000000..918ab327
--- /dev/null
+++ b/src/types/apiImageType.ts
@@ -0,0 +1,5 @@
+export type APIImage = {
+  fileId: number;
+  environment: "LOCAL" | "PROD";
+  source: string;
+};
diff --git a/src/types/certificationType.ts b/src/types/certificationType.ts
index 5d795552..3921a25e 100644
--- a/src/types/certificationType.ts
+++ b/src/types/certificationType.ts
@@ -1,3 +1,5 @@
+import { APIImage } from "./apiImageType";
+
 export interface CertificationDataType {
   certificationId: number;
   certificationAttempt: number;
@@ -25,11 +27,7 @@ export interface CertificationInstnaceDetailDataType {
   certificationMethod: string;
   startDate: string;
   completedDate: string;
-  fileResponse: File;
-}
-
-interface File {
-  source: string;
+  fileResponse: APIImage;
 }
 
 export interface myWeekCertificationDataType {
@@ -42,9 +40,7 @@ export interface AllWeekCertificationDataType {
   nickname: string;
   certifications: CertificationDataType[];
   frameId: number;
-  profile: {
-    source: string;
-  };
+  profile: APIImage;
 }
 
 export interface TotalCertificationDataType {
diff --git a/src/types/homeInstance.ts b/src/types/homeInstance.ts
index 3d03a833..a4c70f9c 100644
--- a/src/types/homeInstance.ts
+++ b/src/types/homeInstance.ts
@@ -1,10 +1,10 @@
+import { APIImage } from "./apiImageType";
+
 export interface InstanceThumbnailDataType {
   instanceId: number;
   title: string;
   participantCnt: number;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
   likesId: number;
 }
diff --git a/src/types/instanceDetail.ts b/src/types/instanceDetail.ts
index ab083bb8..0fd6bcee 100644
--- a/src/types/instanceDetail.ts
+++ b/src/types/instanceDetail.ts
@@ -1,3 +1,5 @@
+import { APIImage } from "./apiImageType";
+
 export interface ChallengeDetailDataType {
   instanceId: number;
   title: string;
@@ -11,7 +13,7 @@ export interface ChallengeDetailDataType {
   certificationMethod: string;
   joinStatus: "NO" | "YES";
   likesInfo: Likes;
-  fileResponse: File;
+  fileResponse: APIImage;
   progress: "PREACTIVITY" | "ACTIVITY" | "DONE";
 }
 
@@ -20,7 +22,3 @@ interface Likes {
   isLiked: boolean;
   likesCount: number;
 }
-
-interface File {
-  source: string;
-}
diff --git a/src/types/likeType.ts b/src/types/likeType.ts
index 44bd889c..a7cde720 100644
--- a/src/types/likeType.ts
+++ b/src/types/likeType.ts
@@ -1,9 +1,9 @@
+import { APIImage } from "./apiImageType";
+
 export interface LikedChallengeDataType {
   instanceId: number;
   title: string;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
   likesId: number;
 }
diff --git a/src/types/myChallengeType.ts b/src/types/myChallengeType.ts
index 46f92b26..5d195b8a 100644
--- a/src/types/myChallengeType.ts
+++ b/src/types/myChallengeType.ts
@@ -1,14 +1,12 @@
+import { APIImage } from "./apiImageType";
+
 export interface MyChallengePreActivityDataType {
   instanceId: number;
   title: string;
   remainDays: number;
   participantCount: number;
   pointPerPerson: number;
-  fileResponse: File;
-}
-
-interface File {
-  source: string;
+  fileResponse: APIImage;
 }
 
 export interface MyChallengeDoneDataType {
@@ -21,7 +19,7 @@ export interface MyChallengeDoneDataType {
   rewardedPoints: number;
   achievementRate: number;
   itemId: number;
-  fileResponse: File;
+  fileResponse: APIImage;
 }
 
 export interface MyChallengeActivityDataType {
@@ -33,5 +31,5 @@ export interface MyChallengeActivityDataType {
   numOfPassItem: number;
   canUsePassItem: boolean;
   itemId: number;
-  fileResponse: File;
+  fileResponse: APIImage;
 }
diff --git a/src/types/profileType.ts b/src/types/profileType.ts
index 0c65fff2..46d339f4 100644
--- a/src/types/profileType.ts
+++ b/src/types/profileType.ts
@@ -1,3 +1,5 @@
+import { APIImage } from "./apiImageType";
+
 export interface MyProfileDataType {
   userId: number;
   identifier: string;
@@ -5,17 +7,16 @@ export interface MyProfileDataType {
   information: string;
   point: number;
   progressBar: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
 }
 
 export interface UserDataType {
   identifier: string;
   nickname: string;
-  fileResponse: {
+  fileResponse: APIImage;
+  /*   fileResponse: {
     source: "none" | string;
-  };
+  }; */
   frameId: number;
 }
 
diff --git a/src/utils/makeBase64URL.ts b/src/utils/makeBase64URL.ts
index 22af6e64..b0184fdc 100644
--- a/src/utils/makeBase64URL.ts
+++ b/src/utils/makeBase64URL.ts
@@ -1,6 +1,6 @@
 interface Params {
   uri?: string;
-  format: string;
+  format?: string;
 }
 
 export const makeBase64URL = ({ uri, format }: Params) => {